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内 容 简 介 

本 书 从 Vue 框 架 的 基础 语法 讲 起 ， 逐 步 深 入 Vue 进 阶 实战 ， 并 在 最 后 配合 项 目 实战 案例 ， 重 点 演示 
了 Vue 在 项 目 开发 中 的 一 些 应 用 。 在 系统 地 讲解 Vue 的 相关 知识 之 余 ， 本 书 力图 使 读者 对 Vue 项 目 开 发 产 
生 更 深入 的 理解 。 

本 书 共 分 为 11 章 ， 涵 盖 的 主要 内 容 有 前 端的 发 展 历 程 、Vue 的 基本 介绍 、Vue 的 语法 、Vue 中 的 选 
项 、Vue 中 的 内 置 组 件 、Vue 项 目 化 、 使 用 Vue 开 发 电 商 类 网 站 、 使 用 Vue 开 发 企业 官网 、 使 用 Vue 开 发 移 
动 端 资讯 类 网 站 、 使 用 Vue 开 发 工具 类 网 站 。 

本 书 内 容 通俗 易 懂 、 案 例 丰 富 、 实 用 性 强 ， 特 别 适 合 Vue 的 初学 者 和 从 业 人 员 阅 读 ， 同 时 也 适合 职业 
生涯 遇 到 “瓶颈 ”的 前 端 从 业 人 员 和 其 他 编程 爱好 者 阅读 。 另 外 ， 本 书 也 适合 作为 相关 培训 机 构 的 教材 。 
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传统 的 网 站 开发 一 般 采 用 HTML+CSS+JS“ 三 驾 马 车 ”作为 
技术 架构 ， 而 Vue 立足 于 其 上 ， 以 模板 语法 为 基础 ， 以 数据 绑 
定 和 组 件 化 开发 为 核心 ， 极 大 地 简化 了 开发 流程 。 使 用 Vue 技 
术 栈 ， 开 发 者 甚至 可 以 在 几 分 钟 内 搭建 出 一 个 完整 的 前 端 项 目 。 

本 书 正 是 以 Vue 技术 栈 为 核心 ， 由 浅 入 深 地 进行 讲解 。 在 
语法 学 习 之 外 ， 本 书 还 将 深入 探讨 和 模拟 底层 机 制 的 实现 ， 从 原 
生 的 角度 剖析 框架 。 最 后 ， 本 书 将 以 当前 最 常见 的 网 站 类 型 为 例 
来 讲解 。 

本 书 将 选取 有 代表 性 和 表达 鲜明 的 示例 ， 以 实战 示例 讲解 知 
识 点 ， 避 免 将 理论 架空 和 复杂 化 ， 并 力图 用 浅显 易 懂 的 语言 进行 
论述 ， 最 大 程度 地 使 文章 内 容 更 易于 理解 。 对 于 一 些 最 佳 实践 和 
优秀 模式 ， 本 书 还 将 划分 小 节 对 其 进行 专题 讲述 。 与 其 他 同类 书 
籍 相 比 ， 本 书 是 从 前 端 从 业者 的 角度 来 思考 和 编写 的 ， 专 注 于 解 
决 学 习 者 在 职业 生涯 上 遇 到 的 困难 和 “瓶颈 ”。 


本 书 适合 以 下 读者 群体 阅读 。 

( 1 ) Vue 初学 者 

初学 者 往往 会 发 现 上 手 Vue 并 不 困难 ， 但 在 项 目 开发 中 却 
不 能 灵活 自如 地 使 用 它 ， 接 中 而 来 的 程序 漏洞 和 频繁 变动 的 项 目 
需求 会 使 自己 手忙脚乱 ， 甚 至 想 采用 熟悉 却 更 复杂 的 原生 写法 来 
进行 开发 。 导 致 这 种 现象 的 根源 在 于 他 们 对 于 Vue 的 理解 还 不 
够 深 对 Vue 中 暗藏 的 “ 黑 魔法 ”无 法 敏锐 地 洞察 ， 甚 至 仅 在 
学 习 过 语法 之 后 就 开始 进行 开发 ， 以 致 在 实战 中 无 法 根据 具体 情 
况 采 用 最 合适 的 方案 。 本 书 针对 这 一 情况 , 特意 将 这 些 “ 黑 魔法 ” 
总 结 出 来 并 模拟 实现 许多 框架 底层 的 机 制 ， 深 入 浅 出 地 对 其 进行 
讲解 ， 意 在 让 读者 看 懂 会 用 。 

(2 ) 原生 或 仿 原生 JS ( Java Script ) 的 从 业者 

Vue 立足 于 JS， 一 切 使 用 Vue 进行 开发 的 项 目 均 可 以 使 用 
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JS 进行 开发 ， 正 如 一 切 的 编程 语言 都 立足 于 电 元 信号 的 正 负极 ， 即 01 码 ， 可 为 什么 软 
件 都 不 采用 二 进 制 编码 来 进行 开发 呢 ? 这 里 面 牵 扯 到 一 个 成 本 的 问题 ， 这 正 是 影响 项 目 
领导 者 进行 决策 的 关键 因素 。Vue 项 目 与 原生 JS 或 jQuery 等 仿 原生 框架 项 目 相 比 ， 开 发 
成 本 要 低 一 些 。 与 此 同时 ，Vue 项 目 对 从 业者 的 要 求 要 高 一 些 ， 待 遇 和 前 景 要 好 一 些 。 

如 果 你 是 一 名 原生 JS 的 应 用 开发 者 ， 不 妨 学 一 手 Vue， 也 许 就 此 突破 职业 “瓶颈 ”， 
迎 来 职业 生涯 又 一 春天 。 本 书 将 作为 你 成 长 路 上 的 最 佳 伴侣 。 

(3 ) 对 MVVM 架构 理念 感 兴趣 的 爱好 者 

从 GitHub 上 被 标 星 的 次 数 来 看 ，Vue 从 诞生 至 今 ， 以 其 强大 的 特性 和 低廉 的 学 习 成 
本 后 来 居 上 ， 已 经 成 为 MVVM 框架 中 的 最 受 欢迎 者 。 从 各 个 角度 的 对 比 来 看 ，Vue 也 比 
在 MVVM 框 架 中 同样 具有 代表 性 的 Angular 和 React 更 出 色 一 些 ,这 点 在 本 书 中 也 有 论述 。 
毫 无 疑问 , 对 Vue 的 学 习 将 有 助 于 你 了 解 MVVM 的 架构 理念 ,达到 一 叶 知 秋 的 效果 。 此 外 ， 
本 书 还 将 演示 多 个 采用 MVVM 架构 的 Web 项 目 ， 在 实战 中 践 行 理论 ， 以 呈现 出 最 真实 
的 观感 。 

(4) 大 中 专 院 校 和 培训 机 构 等 相关 专业 的 学 生 

从 本 质 上 来 讲 ，Vue 属于 前 端 技术 栈 中 的 一 项 实用 技能 ， 更 适合 于 软件 工程 和 计算 
机 科学 与 技术 等 相关 专业 的 同学 学 习 。 但 如 果 你 想 跨 专业 就 业 的 话 ， 上 手 Vue 也 并 不 是 
一 件 难 事 ， 本 书 将 带领 你 快速 入 门 Vue 的 世界 ， 前 提 是 需要 一 定 的 前 端 基 础 。 

多 年 以 来 ， 程 序 员 的 薪资 待遇 一 直 为 人 所 羡慕 且 不 断 地 提升 ， 而 前 端 工程 师 更 是 其 
中 热门 。 从 近年 来 的 招聘 信息 来 看 , 企业 对 于 前 端的 要 求 也 越 来 越 高 , “MVVM 框架 (Vue/ 
React/Angular) 的 使 用 经 验 ” 已 成 为 Web 应 用 项 目 招 人 的 基本 要 求 。 本 书 将 以 理论 结合 
实战 的 方式 ， 由 浅 入 深 地 对 Vue 进行 讲解 ， 脚 踏实 地 ， 一 步 一 个 脚印 ， 帮 你 筑 基 前 端 工 
程 师 之 路 。 


本 书 特 色 


(1 ) 示例 为 主 ， 齐 析 为 辅 ， 一 切 尽 在 运行 中 ， 避 免 将 理论 架空 

本 书 中 的 知识 点 均 配 以 精心 编制 、 具 有 代表 性 的 示例 ， 并 力图 将 知识 点 融入 示例 中 
进行 讲述 ， 目 的 在 于 以 示例 为 驱动 演绎 知识 点 ， 将 理论 生动 形象 化 ， 避 免 大 段 理 论 带 来 
的 枯燥 感 和 视野 言 区 。 在 由 浅 入 深 地 讲述 一 套 知 识 体系 时 ， 笔 者 将 以 同一 示例 为 原型 ， 
不 断 对 其 进行 丰富 和 变换 ， 绝 不 会 引入 新 的 示例 代码 以 增添 读者 的 负担 。 此 外 ， 这 些 示 
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例 均 是 独立 可 运行 的 ， 读 者 完全 可 以 在 模仿 和 拓展 中 解决 阅读 时 产生 的 疑惑 。 

( 2 ) 理论 与 实践 结合 ， 在 理论 中 洞察 ， 在 实践 中 感悟 

本 书 的 前 六 章 内 容重 在 讲解 Vue 的 知识 体系 ， 力 图 使 读者 达到 学 有 所 知 、 学 有 所 感 
的 地 步 ， 使 读者 在 接触 到 陌生 的 Vue 代码 片段 时 ， 能 够 知 其 优 劣 。 而 后 五 章 内 容 以 常见 
的 网 站 类 型 为 例 ， 展 示 了 Vue 在 项 目 开发 中 的 运用 ,这 些 网 站 包括 电 商 类 网 站 (PC 端 ) 、 
企业 官网 (兼容 PC 和 移动 端 ) 、 资 讯 类 网 站 移动 端 ) 和 工具 类 网 站 (PC 端 ) 。 

以 理论 指导 实践 ， 以 实践 检验 和 丰富 理论 ， 这 是 一 个 螺旋 上 升 的 过 程 ， 也 是 认 知 新 
事物 的 正确 方法 。 笔 者 希望 以 理论 与 实践 相 结 合 的 方式 ， 避 免 纸 上 谈 兵 ， 使 读者 不 仅 能 
够 学 有 所 知 、 学 有 所 感 ， 更 能 够 学 以 致 用 。 

( 3 ) 多 年 经 验 和 心得 ， 大 型 项 目的 最 佳 实践 和 设计 模式 

笔者 一 直 活跃 于 GitHub 等 开源 社区 ， 接 触 过 国内 外 许多 优秀 项 目的 源码 ， 并 以 软件 
工程 的 专业 知识 不 断 检验 和 更 新 自己 的 认 知 。 在 本 书 的 创作 过 程 中 ， 笔 者 会 将 一 些 最 佳 
实践 和 设计 模式 应 用 于 示例 和 项 目的 开发 中 。 对 于 一 些 常用 的 实践 和 模式 ， 笔 者 还 将 划 
分 小 节 对 其 进行 专题 讲述 。 在 讲解 Vue 之 外 ， 笔 者 希望 这 本 书 能 够 对 你 的 编程 境界 有 所 


提升 


从 一 无 所 知 到 略 有 心得 ， 笔 者 也 遇 到 过 许多 困难 ， 借 鉴 过 许多 前 辈 的 经 验 ， 也 希望 
能 够 将 自己 的 知识 和 心得 分 享 出 去 ， 给 走 在 路 上 的 人 照 亮 一 段 旅程 。 

本 书 从 Vue 的 基础 语法 入 手 ， 逐 步 深 入 进 阶 特性 ， 最 后 选取 最 具 代 表 性 的 网 站 类 型 
进行 项 目 实战 ， 其 中 穿插 着 各 种 最 佳 实践 的 讲解 并 模拟 框架 底层 机 制 的 实现 ， 力 图 使 同 
学 们 在 理论 学 习 中 知 其 全 貌 ， 在 实战 中 融会 贯通 。 

希望 这 本 书 能 够 给 你 带 来 一 定 的 收获 和 启发 ， 在 职业 生涯 上 助 你 一 臂 之 力 。 


本 书 学 前 基础 


Vue 立足 于 JS， 这 意味 着 你 在 学 习 本 书 之 前 要 具备 扎实 的 JS 基础 ， 除 了 会 用 最 基本 
的 关键 字 和 语法 结构 之 外 ， 你 还 需要 掌握 JS 中 的 事件 机 制 、DOM 编程 、 闭 包 、 对 象 引 
用 和 一 些 内 置 对 象 的 常用 方法 等 内 容 。 当然, 笔者 也 会 在 书 中 对 这 些 内 容 进行 简单 的 介绍 ， 
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以 确保 不 会 对 Vue 的 学 习 造 成 障碍 。 不 过 ， 作 为 一 本 前 端 技术 的 进 阶 用 书 ， 你 的 编程 境 
界 越 高 ， 你 能 体会 的 也 就 越 多 。 

除了 具备 扎实 的 JS 基础 之 外 ， 你 还 需要 掌握 基本 的 CSS 和 HTML 5 用 法 ， 这 些 是 
组 件 化 开发 中 必 不 可 少 的 内 容 。 

在 项 目 实战 中 ， 笔 者 将 会 使 用 一 些 CSS 和 HTML 5 的 高 级 特性 或 引入 一 些 第 三 方 组 
件 库 ， 缺 乏 相 关 开 发 经 验 的 同学 也 许 会 对 此 感到 陌生 ， 不 过 也 不 必 担 心 ， 笔 者 会 对 这 些 
内 容 进行 详细 讲解 。 当 然 ， 它 们 也 并 不 难于 习 得 。 


本 书 内 容 及 体系 结 


本 书 共 分 为 11 个 章节 ， 其 中 第 1 ~ 6 章 属于 概念 篇 ， 用 于 描述 理论 体系 ; 7 一 11 
章 属于 实战 篇 ， 用 于 演示 实战 项 目 。 下 面 分 别 介 绍 这 11 个 章节 的 内 容 。 

第 1 章 介绍 Vue 的 发 展 历程 、 因 果 关 系 ， 这 部 分 内 容 并 不 影响 你 对 技术 的 掌握 ， 如 
果 你 对 此 没有 兴趣 的 话 ， 可 以 跳 过 不 看 。 

第 2 章 首先 介绍 如 何在 项 目 中 引入 Vue， 这 是 使 用 Vue 的 起 点 所 在 ;之 后 介绍 Vue 
实例 和 实例 的 生命 周期 并 主题 化 讲解 Vue 中 的 数据 链 和 数据 绑 定 原理 ， 了 解 这 些 将 会 让 
你 在 项 目 开 发 中 大 受 神 益 。 

第 3 章 介 绍 Vue 中 的 插值 绑 定 和 常见 指令 的 用 法 ， 这 是 Vue 学 习 中 的 重点 部 分 。 

第 4 章 讲 述 了 三 个 方面 的 选项 。 其 中 ， 有 关 数 据 和 方法 的 选项 也 是 Vue 学 习 中 的 
重点 部 分 ， 掌 握 这 些 和 第 3 章 的 内 容 足 以 让 你 构建 一 个 完整 的 Vue 应 用 ;， 有 关 DOM 泻 
染 的 选项 在 本 书 的 实战 章节 中 没有 主动 用 到 ， 这 些 选 项 是 否 能 派 上 用 场 取决 于 你 所 在 项 
目的 开发 方式 ， 有 关 封装 复 用 的 选项 属于 Vue 进 阶 特性 ， 学 习 难 度 相对 较 大 ， 学 好 这 些 
将 使 你 的 代码 结构 更 加 优雅 且 易 于 维护 ， 从 而 在 面 对 复杂 功能 和 频繁 的 需求 变动 时 游 丸 
有 余 。 

第 5 章 讲述 了 Vue 中 内 置 的 一 些 组 件 ， 这 些 组 件 封 装 了 一 些 功能 ， 用 好 这 些 将 使 开 
发 变 得 更 加 简单 。 

第 6 章 讲述 了 Vue 技术 栈 中 的 其 他 成 员 ， 包 括 前 端 路 由 (Vue Router) 、 状 态 管理 
器 (Vuex) 和 项 目 快速 构建 工具 (Vue Cli) ， 这 些 都 将 服务 于 Vue 项 目的 开发 。 

从 第 7 章 开 始 ， 本 书 进入 实战 章节 。 
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第 7 章 和 第 8 章 演示 了 电 商 类 网 站 的 开发 ， 涉 及 的 内 容 还 包括 打包 工具 Webpack、 
字体 图 标 库 Font Awesome 和 缓存 对 象 localStorage。 

第 9 章 演示 了 企业 官网 的 开发 ， 涉 及 的 内 容 还 包括 响应 式 设 计 、 翻 页 组 件 Swiper 和 
网 站 多 语 的 配置 。 

第 10 章 演 示 了 资讯 类 网 站 的 开发 ， 涉 及 的 内 容 还 包括 移动 端 应 用 的 开发 。 

第 11 章 演 示 了 工具 类 网 站 的 开发 ， 涉 及 的 内 容 还 包括 可 伸缩 矢量 图 形 SVG。 


本 书 学 习 建 议 


对 于 初次 接触 Vue 的 同学 来 说 ， 最 好 你 能 耐心 将 本 书 读 完 ， 除 了 学 会 使 用 Vue 之 外 ， 
你 的 编程 境界 也 会 有 所 提高 。 

如 果 你 急于 应 聘 要 求 具备 Vue 使 用 经 验 的 岗位 ， 就 需要 掌握 第 3 章 和 第 4 章 中 有 关 
数据 和 方法 的 选项 ， 并 对 第 4 章 中 有 关 封 装 复 用 和 第 5 章 、 第 6 章 的 内 容 有 所 了 解 ， 之 
后 快速 进入 实战 , 查看 4 个 Web 项 目的 源码 和 演示 。 在 Vue 的 深水 区 游泳 , 还 不 至 于 室 息 。 

如 果 你 喜欢 听 故 事 的 话 ， 不 妨 把 第 1 章 读 一 下 ， 毕 竞 在 日 后 的 工作 中 能 接触 到 的 代 
码 五 花 八 门 ， 能 对 这 些 代码 的 年 代 特征 形成 基本 的 认识 ， 也 是 蛮 不 错 的 。 

本 书 的 知识 点 均 配 以 示例 ， 希 望 通过 演示 示例 的 方式 使 复杂 和 空洞 的 理论 变 得 形象 
起 来 ， 这 些 示 例 的 代码 将 随 书 附 赠 。 希 望 同 学 们 在 学 习 时 不 要 干 嚼 文字 ， 对 于 不 理解 的 
地 方 一 定 要 运行 代码 ， 空 看 十 遍 不 如 上 手 一 试 。 

在 后 面 的 实战 章节 中 ， 本 书 只 摘 取 了 部 分 具有 代表 性 的 代码 和 流程 进行 讲解 ， 逻 辑 
结构 较为 抽象 ， 建 议 同 学 们 先 运行 项 目 ， 对 项 目 内 容 有 个 大 致 的 了 解 ， 之 后 参照 项 目 源 
码 进 行 学 习 。 


辅助 学 习 资料 


@ 本 书 源 代码 
@ 本 书 辅助 视频 教程 
以 上 内 容 ， 我 们 将 存储 在 云端 并 提供 下 载 链 接 〈 或 二 维 码 ) ， 具 体 请 见 本 书 封底 。 
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其 实 每 一 个 项 目 都 不 是 一 中 而 就 的 , 一 开始 的 计划 总 是 随 着 局 势 (团队 领导 者 的 想法 、 
市 场 变 动 、 客 户 需求 等 ) 的 变化 被 不 断 地 修改 ， 项 目 总 是 在 一 次 次 试 错 的 过 程 中 不 断 地 
成 长 和 成 熟 ， 在 反复 的 优化 和 重 构 后 ， 项 目 才 有 了 最 终 的 模样 。 其 实 ， 人 的 一 生 也 是 如 
此 ， 我 们 总 是 在 不 停 地 遇 到 困难 ， 不 停 地 追寻 答案 ， 借 鉴 着 别人 的 经 验 和 心得 ， 借 助 前 
辈 们 踏 平 的 道路 ， 才 走 到 了 我 们 现在 的 位 置 。 过 去 ， 我 常常 在 想 ，“ 为 往 圣 继 绝学 ， 呵 ， 
这 是 多 么 伟大 的 志向 ”， 然 而 事实 上 ， 我 们 每 个 人 都 在 做 着 这 件 事 。 人 类 社会 现 有 的 文 
明 也 绝 非 少数 人 的 功劳 ， 这 来 自 一 代 代 人 的 传承 。 

这 里 ， 首 先 要 感谢 Vue 团队 的 开源 精神 ， 他 们 的 无 私 奉献 使 我 们 在 项 目 开 发 时 有 了 
更 多 和 更 好 的 技术 选择 ， 同 时 也 促成 了 本 书 的 编写 。 

感谢 本 书 的 所 有 编校 人 员 ， 在 你 们 的 支持 和 帮助 下 ， 这 本 书 才 有 了 更 高 的 质量 。 

最 后 感谢 我 的 家 人 和 同事 们 ， 是 他 们 的 支持 给 了 我 充足 的 空间 和 自由 进行 创作 。 
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第 1 章 引 二 
该 部 分 主要 介绍 前 端 技术 的 发 展 历史 和 从 MVC 架构 进化 到 MVVM 的 历程 。 笔 
者 意图 通过 对 这 些 内 容 的 描述 ， 使 读者 对 工作 和 学 习 中 遇 到 的 一 些 代码 的 标准 和 年 代 
特征 形成 一 些 基本 判断 和 认识 ， 并 充分 了 解 Vue 这 样 的 MVVM 框架 对 高 效率 和 高 质 
量 项 目 开发 所 起 到 的 作用 。 


1.1 前端 技术 的 发 展 


纵 观 整个 前 端 发 展 史 ， 我 们 可 以 发 现 ， 几 个 关键 的 时 间 节 点 都 是 和 重大 的 技术 飞跃 
息息相关 的 ， 如 Ajax 的 诞生 、Node 的 问世 等 。 笔 者 将 结合 这 几 个 点 ， 和 大 家 一 起 回顾 
和 展望 前 端 开发 的 历史 发 展 轨迹 和 未 来 发 展 前 景 。 


1.1.1 ”从 静态 走向 动态 


最 初 的 网 页 是 欧洲 粒子 物理 研究 所 的 科学 家 为 了 方便 查看 共享 文档 和 论文 ， 而 基于 
XML (Extensible Markup Language) 语言 创造 的 ， 这 也 是 为 什么 在 前 端 开发 中 ， 最 重要 
的 全 局 对 象 被 称 为 document 而 不 是 context、page、application 等 的 原因 。 当 时 ， 网 页 只 
具备 文本 图 片 的 显示 及 页 面 间 相 互 跳 转 (Hyper Link) 的 功能 , 因此 人 们 称 为 HIML (Hyper 
Text Markup Language) 。 

最 初 的 Web， 功 能 十 分 单一 ， 开 发 也 并 不 复杂 。 开 发 者 先 把 写 好 的 网 页 放 在 服务 器 
指定 位 置 ( 网 站 根 目 录 ) 下 ， 然 后 将 映射 URL 分 享 给 使 用 者 ， 使 用 者 在 浏览 器 地 址 栏 输 
入 URL 即 可 访问 网 页 内 容 ， 如 图 1.1 所 示 。 


图 1.1 早期 的 浏览 器 和 网 页 
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早期 的 HTML 作为 静态 文件 ， 即 使 只 有 部 分 内 容 是 需要 变动 的 ， 那 么 有 多 少 种 变动 
的 可 能 性 ， 就 需要 准备 多 少 份 文档 ， 这 对 开发 者 来 说 是 非常 不 友好 的 ， 并 且 无 法 与 用 户 
进行 交互 。 

CGI 〈Common Gateway Interface) 的 出 现 改善 了 这 一 情况 。CGI 作为 服务 器 拓展 功 
能 ， 可 以 从 数据 库 或 者 文件 系统 获取 数据 ， 在 将 数据 泻 染 为 HIML 文档 后 ， 返 回 至 客户 
端 ， 从 而 实现 了 网 页 的 动态 生成 。 在 接收 到 用 户 请 求 后 ，CGI 还 可 以 在 服务 端 进行 处 理 ， 
并 返回 对 应 的 处 理 结果 ， 如 图 1.2 所 示 。 


网 页 模板 动态 数据 
返回 网 页 Y 
| 服务 喘 
不 
天 发 送 请 求 


1.2 动态 网 页 泻 染 流程 


CGI 被 广泛 认为 是 服务 端 脚本 语言 的 鼻祖 。 然 而 ， 它 也 有 着 非常 致命 的 缺陷 。 首 先 ， 
CGI 每 接收 到 一 个 请 求 ， 都 会 新 开 一 个 进程 进行 处 理 ， 占 用 服务 器 的 CPU 和 内 存 ， 当 请 
求 量 成 和 上 万 时 ， 服 务 器 可 能 无 法 支撑 以 致 衣 溃 。 其 次 ， 黑 客 很 容易 通过 不 完善 的 CGI 
程序 非法 进入 开发 者 的 服务 器 系统 ， 这 从 安全 方面 来 考虑 是 绝对 不 允许 的 。 

以 后 来 人 的 角度 来 看 ， 笔 者 认为 CGI 出 现 的 最 大 意义 就 是 给 当时 刚 起 步 的 Web 提供 
了 一 个 发 展 方向 。 在 这 之 后 ，PHP、JSP、ASP 等 各 种 服务 端 语 言 层 出 不 穷 ， 不 仅 弥补 了 
CGI 的 缺陷 ,而 且 在 性 能 上 愈加 高 效 ， 在 开发 上 愈加 简捷 。 这 些 语言 的 出 现 和 广泛 应 用 ， 
使 得 Web 技术 飞速 发 展 ， 前 端 网 页 从 此 从 静态 走向 动态 ， 这 个 时 代 被 称 为 Web 1.0 时 代 。 


1.1.2 ”从 后 端 走向 前 端 


在 Web 1.0 时 代 ， 前 后 端 是 如 何 协作 的 呢 ? 由 于 网 页 是 在 服务 端 使 用 动态 脚本 语言 
和 模板 引擎 泻 染 出 来 的 ， 所 以 一 般 由 前 端 先 写 模板 ， 写 好 后 交付 给 后 端 套用 ， 之 后 再 由 
前 后 端 联 调 ， 以 确认 模板 套用 无 误 。 

在 这 种 开发 环境 下 ， 前 后 端 耦合 密切 ， 项 目 开 发 需要 很 高 的 沟通 成 本 。 在 模板 引擎 
的 变量 、 判 断 和 循环 、 宏 区 块 等 语法 糖 的 支持 下 ， 前 端 也 可 以 拿 到 环境 变量 来 实现 部 分 
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业务 逻辑 。 如 果 前 端 开发 者 表现 得 稍微 弱势 一 些 ， 就 很 有 可 能 被 后 台 殷 着 在 视图 层 实现 
一 些 业务 代码 。 同 时 ， 整 个 项 目的 代码 质量 也 随 之 降低 。 

网 站 的 这 种 组 织 架构 还 会 带 来 另外 一 些 问题 。 比 如 ， 页 面 哪怕 仅 有 一 小 块 内容 需 要 
变更 ， 浏 览 器 也 需要 重新 请 求 和 泻 染 整 个 页 面 。 一 方面 ， 网 站 资源 的 传输 耗费 了 更 多 的 
时 间 ; 另 一 方面 ， 页 面 重 载 的 用 户 体验 也 十 分 糟糕 。 

举 个 例子 ， 用 户 在 登录 页 面 输入 了 错误 密码 时 ， 服 务 器 要 将 校 验 信息 泻 染 到 页 面 并 
传 给 浏览 器 。 实 际 上 ， 页 面 只 是 多 了 一 行 类 似 于 “密码 错误 ”的 提示 ， 然 而 网 站 资源 却 
需要 重新 进行 传输 ， 同 时 页 面 还 会 丢失 用 户 输 入 的 表单 数据 (即便 到 了 今天 ， 这 种 现象 
依然 可 以 在 一 些 政府 和 国企 的 老 旧 网 站 中 看 到 ) 。 

当时 虽然 出 现 了 各 种 页 面 和 数据 的 缓存 技术 ， 稍 有 成 效 地 缓解 了 这 一 问题 ， 但 也 无 
法 从 根本 上 解决 问题 。 于 是 ， 从 事 Web 的 前 辈 们 开始 探寻 其 他 一 些 解决 方案 ， 如 Ajax 
异步 数据 加 载 。 

Ajax (Asynchronous JavaScript And XML， 异 步 JavaScript 和 XML) 通过 XMLHttpRequest 
对 象 ， 可 以 在 不 重 载 页 面 的 情况 下 与 Web 服务 器 交换 数据 ， 再 加 上 JavaScript 的 document 
对 象 ， 开 发 者 们 可 以 很 轻松 地 实现 页 面 局 部 内 容 刷 新 。 

从 1999 年 开始 ，ActiveX 和 XMLHttpRequest 陆续 问世 ，Ajax 的 星星 之 火 渐渐 燃 起 。 
时 间 推 移 到 2005 年 , 互联 网 巨头 Googsgle 发 布 了 全 面 使 用 Ajax 打造 的 Gmail( 如 图 1.3 所 示 ) 
和 Gmap 两 款 应 用 。 人 们 惊讶 地 发 现 ， 原 来 使 用 异步 数据 传输 获得 的 应 用 体验 是 如 此 地 
良好 。 自 此 ，Ajax 获得 了 井喷 式 的 发 展 。 


(@1 2 ET ETD ET 


Send | Savelow | Dacard ， Drah autosaved at 1.53PM(1n 


From: Robmn Wauters 


Tog: “<tips@techerunch com> 


Add Ce | dd Bec 


Subject: Check out this icon here v 
Sattach a le 3 Add enetinatation 
B ZL 大 古 信 本 精 司 到 二 注 天 盏 攻 


1.3 Gmail 使 用 界面 


得 益 于 Ajax 的 发 展 ， 前 后 端 分 离 的 趋势 日 渐 明 显 ， 前 端 不 再 需要 依赖 后 台 环 境 
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生存 ， 所 有 服务 器 数据 都 可 以 通过 异步 交互 来 获取 。 在 取得 一 个 良好 定义 的 RESTful 
(Representational State Transfer， 表 述 性 状态 转移 ) 接口 后 ， 两 端 甚至 可 以 在 零 沟 通 成 本 

的 情况 下 并 行 完成 项 目 任务 。 

随 着 Google V8 引擎 问世 、PC 和 移动 端 设备 性 能 提高 、ES6 和 HS 日 趋 成 熟 ， 浏 览 
器 端的 计算 能 力 和 功能 性 似乎 愈加 过 剩 ， 开 发 者 们 开始 将 越 来 越 多 的 业务 逻辑 代码 迁移 
到 前 端 ， 前 端 路 由 的 概念 也 逐渐 清晰 。 

路 由 这 个 概念 首先 出 现在 后 台 。 传 统 Web 网 页 间 的 跳 转 ， 需 要 开发 者 先 在 后 台 设 置 
页 面 的 路 由 规则 ， 之 后 服务 器 根据 用 户 的 请 求 检 索 路 由 规则 列表 ， 并 返回 相应 的 页 面 。 
而 前 端 路 由 则 是 在 浏览 器 端 配置 路 由 规则 ， 通 过 侦 听 浏览 器 地 址 的 变化 ， 异 步 加 载 和 更 
新 页 面 内 容 。 

可 以 这 么 说 ,Ajax 实现 了 无 刷新 的 数据 交互 , 而 前 端 路 由 则 实现 了 无 刷新 的 页 面 跳 转 
Ajax 将 Web Page 发 展 成 Web App, 而 前 端 路 由 则 给 了 Web App 更 多 的 可 能 , 如 SPA (Single 
PageApplication， 单 页 面 应 用 ) ， 如 图 1.4 所 示 。 


props/state location 


属性 /状态 


component ------- I router 
-一 - .. 


1.4 单 页 面 应 用 CSPA 


Angular、React、Vue 等 知名 的 前 端 框架 都 有 前 端 路 由 的 概念 。 在 之 后 的 章节 中 ， 笔 
者 会 专门 讲解 前 端 路 由 的 实现 原理 和 Vuejs 项 目的 核心 内 容 之 一 一 一 Vue Router。 

现在 ， 很 多 Web 项 目 采用 这 样 的 架构 ， 后 台 只 负责 数据 的 存 取 和 组 装 ， 而 前 端 则 负 
责 业 务 逻 辑 层 和 视图 层 的 全 部 工作 。 这 一 路 走 来 ， 项 目 重心 已 从 后 端 转移 到 了 前 端 。 


1.1.3 ”从 前 端 走向 全 端 


下 面 是 笔者 在 2018 年 春节 时 ， 在 CSDN (国内 的 技术 交流 社区 ) 的 官网 上 截取 的 一 
张 图 ， 如 图 1.5 所 示 。 读 之 深 有 体会 ， 有 兴趣 的 同学 可 以 细 细 品味 ， 这 里 不 再 多 作 獒 述 。 
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上 联 ; 微 情 知 乎 占 头条 谁 与 争锋 
下 联 ; 桌面 移动 待 前 端 一 统 江 润 
横批 : 希 息 万 变 


一 Et 一 


上 磋 : 存 数 据 订 接 口 如 探 囊 取 物 
下 联 ; 镇 异步 释 内 存 似 手 到 近来 
横批 : 后 方 安定 


1.5 2018 年 CSDN 春联 


若 要 说 2009 年 Web 界 最 为 爆炸 性 的 新 闻 ， 那 一 定 是 Nodejjs 的 问世 。 

2009 年 2 月 ， 一 个 名 叫 Ryan Dahl 的 开发 者 在 博客 上 宣布 准备 基于 Google V8 引擎 
创建 一 个 轻 量 级 的 Web 服务 器 并 提供 一 套 组 件 库 。 

同年 5 月 ,Ryan Dahl 在 GitHub 上 发 布 了 最 初版 本 的 Node.js, 这 标志 着 Node.js 的 诞生 。 
从 此 ，Javascript 也 占据 了 服务 端 编程 语言 的 一 席 之 地 。 前 端 工程 师 可 以 以 很 低 的 成 本 用 
Nodejs 和 MongoDB 搭建 一 个 后 台 。 乍 一 看 ， 前 端 工程 师 和 全 栈 工程 师 之 间 的 距离 ， 只 
在 于 一 个 DataBase (数据库 ) 。 

从 Nodejjs 诞生 至 今 ， 无 论 是 新 手 还 是 专家 ， 大 批量 地 涌 入 Node 社区 ， 大 家 围绕 着 
项 目 ， 使 用 并 贡献 着 自己 的 力量 ， 努 力 使 之 适用 于 更 多 的 应 用 场景 。 这 些 年 来 ， 人 们 对 
Nodejs 褒 贬 不 一 , 但 毋庸 置疑 的 是 , 它 的 问世 必 是 前 端 发 展 史上 浓墨重彩 的 一 笔 , 如 图 1.6 


所 示 。 


Nodejs 是 一 个 基于 Chrome V8 引 辣 的 JavaScript 
Nodejs 使 用 了 一 个 事件 驱动 、 非 阻 宣 式 |/0 的 楼 
Nodejs 的 包 管理 品 npm， 是 全 球 最 大 的 开源 认 


v8.9.3 APl 文档 


唯一 与 官方 版 本 同步 的 让 文 文档 


1.6 Nodejs 主页 
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这 两 年 来 ， 随 着 微 信 小 程序 和 支付 宝 小 程序 的 问世 ， 前 端 技术 早已 超脱 了 Web 和 
Hybrid 应 用 的 范围 。 前 端 工程 师 很 容易 基于 固有 技术 栈 快速 上 手 和 开发 小 程序 类 微 应 
用 。 以 微 信 小 程序 为 例 ， 框 架 使 用 语法 通用 的 WXML 代替 HIML、WXSS 代替 CSS， 
开发 语言 由 HTML+CSS+JS 变 为 WXML+WXSS+JS。 此 外 ， 与 Vuejs 一 样 ， 它 们 也 是 
MVVM 模式 ， 如 图 1.7 所 示 。 


Ed] 


次 取 头 像 昵称 


1.7 ” 微 信 小 程序 开发 


2018 年 3 月 20 日 ,IT 技术 圈 里 又 爆 出 一 热 搜 新 闻 : 小米、 中兴、 华为、 金立、 联想 、 
魅族 、 努 比 亚 、OPPO、vivo、 一 加 十 厂 联合 共 建 “ 快 应 用 ”的 标准 和 平台 。 

快 应 用 类 似 于 小 程序 ， 不 用 下 载 和 安装 即 可 使 用 和 生成 桌面 快捷 方式 ， 但 有 区 别 的 
一 点 在 于 ， 快 应 用 不 必 依 赖 于 微 信 或 者 支付 宝 这 样 的 第 三 方 平台 ， 它 是 手机 厂商 从 系统 
应 用 层面 支持 的 。 对 于 前 端 工程 师 来 说 ， 这 又 是 一 则 喜讯 ， 因 为 开发 快 应 用 使 用 的 也 是 
前 端 技术 栈 。 

可 以 预见 ， 未 来 的 前 端 和 前 端 衍 生 技 术 很 有 可 能 遍布 从 Web 到 桌面 应 用 ， 从 PC、 
移动 端 到 智能 电视 、 游 戏 机 等 的 各 个 角落 。 

未 来 的 工程 师 也 许 只 分 为 两 种 ， 一 种 是 负责 数据 方面 的 云端 工程 师 ， 另 一 种 则 是 全 
端 (前 端 ) 工程 师 。 
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1.2 MVVM 族 员 一 一 Vue.js 


模型 一 视图 一 视图 模型 (Model-View-ViewModel, MVVM) , 本 质 上 是 MVC (模型 一 
视图 一 控制 器 ) 的 改进 版 ， 其 最 重要 的 特性 即 是 数据 绑 定 〈data binding) ， 此 外 还 包括 
依赖 注入 、 路 由 配置 、 数 据 模板 等 一 些 特性 。 


1.2.1 从 MVC 到 MVVM 


模型 一 视图 一 控制 器 (Model-View-Controller，MVC) 模式 ， 在 Web 1.0 时 代 曾 被 广 
泛 应 用 于 Web 架构 中 ， 然 而 其 诞生 的 时 间 却 比 Web 早 几 年 。 最 初 ，MVC 被 应 用 于 桌面 
程序 中 ， 在 PHP、JSP 等 脚本 语言 诞生 之 后 ， 也 逐渐 成 为 Web 开发 的 主流 模式 。 

View 视图 层 是 用 户 能 够 看 到 并 进行 交互 的 客户 端 界面 ， 如 桌面 应 用 的 图 形 界面 、 浏 
览 器 端 泻 染 的 网 页 等 ，Model 指 业务 模型 ， 用 于 计算 、 校 验 、 处 理 和 提供 数据 ， 但 不 直 
接 与 用 户 产生 交互 ;Controller 控制 器 则 负责 收集 用 户 输入 的 数据 ， 向 相关 模型 请 求 数据 
并 返回 相应 的 视图 来 完成 交互 请 求 ， 如 图 1.8 所 示 。 


4 


| » Controller 


于 


用 户 界 面 View 下 一 一 一 一 一 一 一 Model 
用 户 输入 database 
1.8 MVC 模式 


MVC 模式 实现 了 M 和 V 的 代码 分 离 ，M 专注 于 数据 ，V 专注 于 表达 ，C 则 在 M 和 
V 之 间架 起 了 一 座 桥梁 。 即 使 采用 同一 个 Model 的 数据 ， 如 果 调 用 不 同 的 View〈 如 柱状 
图 和 表格 ) ， 也 会 得 到 不 同 的 页 面 呈现 。 这 样 的 设计 ， 不 仅 减 少 了 Model 层 的 元 余 代 码 ， 
使 得 Model 和 View 更 加 灵活 和 易于 维护 ， 同 时 也 简化 了 项 目的 架构 和 管理 。 

随 着 技术 日 新 月 异 的 更 迭 ，MVC 渐渐 演化 出 更 多 的 形态 。 虽 然 这 些 模式 都 有 特定 的 
名 称 , 然而 实际 上 它们 都 是 MVC 的 衍生 版 本 。 因此 , 有 的 开发 者 也 会 将 其 统一 称 作 “MV* 
模式 ”，MVVM 即 是 其 中 的 一 种 。 
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与 MVC 模式 一 样 ，MVVM 的 主要 目的 是 分 离 视图 (View) 和 模型 (Model) ， 
ViewModel 层 封 装 了 界面 展示 和 操作 的 属性 和 接口 。 通 过 数据 绑 定 ， 我 们 可 以 将 View 和 
ViewModel 关联 在 一 起 ， 当 ViewModel 中 的 数据 发 生变 化 时 ，View 也 会 同步 进行 更 新 ， 
如 图 1.9 所 示 。 


ViewModel Model 


View 


视图 层 主 要 负责 视图 一 模型 层 起 到 桥梁 的 作用 ，| | 模型 层 主要 负责 处 理 交 互 
展示 视图 一 方面 响应 用 户 事件 并 向 模型 | | 请 示 并 返回 响应 的 数据 
层 发 送 请 求 ; 另 一 方面 将 模型 
层 返回 的 数据 通过 数据 绑 定 在 
视图 


中 展现 


图 1.9 MVVM 模式 


MVVM 模式 解 不了 视图 和 模型 。 在 模式 中 ， 每 一 个 视图 都 有 对 应 的 一 个 
ViewModel， 同 时 ViewModel 与 模型 建立 联系 。 当 接收 到 用 户 请 求 后 ，ViewModel 
获取 模型 响应 的 数据 ， 并 通过 数据 绑 定 将 相应 的 视图 页 面 重新 泻 染 。 模 型 层 的 数据 只 
需要 传 入 ViewModel 即 可 实现 视图 的 同步 更 新 ， 从 而 实现 了 视图 和 模型 之 间 的 松散 
耦合 。 

与 MVC 不 同 的 是 ，MVC 是 系统 架构 级 别 的 ， 而 MVVM 是 用 于 单 页 面 上 的 。 因 此 ， 
MVVM 的 灵活 性 要 远大 于 MVC。 如 果 将 这 里 的 M 抛 开 ， 只 看 VVM 的 话 ， 那 这 就 是 一 
个 组 件 〈 如 treeview) 的 设计 模式 。 所 以 ，MVVM 模式 也 是 组 件 化 开发 的 最 佳 实践 。 


1.2.2 Vuejs 简 介 


Vuejs 是 一 套 轻 量 级 MVVM 框架 ， 由 时 任 Google 工程 师 的 尤 雨 溪 ( 现 担任 阿里 
Weex 团队 技术 顾问 ) 创作 并 开源 。 截 至 本 书 编写 时 ，Vue.js 已 在 GitHub 获得 star 数 9.3 
万 个 , 而 同 为 MVVM 框 架 且 更 早 诞生 的 React 获 得 的 star 数 不 过 9.5 万 个 , Angular 则 是 5.8 
万 ， 如 图 1.10 所 示 。 

与 其 他 重量 级 框架 不 同 的 是 ，Vue 的 核心 库 只 关注 视图 层 ， 并 且 提 供 尽 可 能 简单 的 
API 以 实现 数据 绑 定 、 组 件 复 用 等 机 制 ， 且 非常 容易 学 习 并 混入 其 他 库 。 同 时 ，Vue 也 
完全 有 能 力 支 持 采 用 SPA 设计 和 组 合 其 他 Vue 生态 库 的 系统 。 
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图 1.10 MVVM 框架 单 指标 影响 力 对 比 


1.3 Vue 与 React 


在 MVVM 框架 一 族 中 ，Vuejs 的 表现 十 分 优秀 。 在 1.3 和 1.4 小 节 中 ， 我 们 将 分 别 
看 到 Vue 和 React 以 及 Vue 和 Angular 的 对 比 表现 。 

Vue 和 React 都 是 轻 量 级 框架 ， 不 过 总 体 来 看 ，Vue 的 性 能 是 要 高 于 React 的 ， 笔 者 
简单 罗列 了 以 下 几 点 。 


1.3.1 虚拟 DOM 


在 处 理 用 户 界面 时 ，DOM 操作 成 本 是 最 高 的 ， 两 者 都 在 泻 染 流程 中 采用 虚拟 DOM 
以 降低 页 面 开销 ， 如 图 1.11 所 示 。 不 过 ，Vue 的 虚拟 DOM 实现 的 层级 更 高 一 些 ， 这 也 
意味 着 Vue 比 React 更 轻 量 ， 性 能 更 高 一 些 。 


ViewModel (视图 一 模型 层 ) 


虚拟 DOM 一 一 数据 绑 定 


真实 DOM 事件 监听 器 


1.11 泻 染 流程 
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1.3.2 ”功能 性 组 件 


两 者 都 提供 一 些 功能 性 组 件 以 减少 用 户 开销 。 笔 者 运行 GitHub 上 的 一 个 测试 项 目 
(https: //github.com/chrisvfritz/vue-render-performance-comparisons) ， 该 项 目 将 泻 染 
10 000 个 列表 条 目 100 次 ， 得 到 的 测试 结果 如 下 ， 如 表 1.1 所 示 。 


表 1.1 测试 结果 


Vue React 
第 一 次 22ms 63ms 


第 四 次 
第 五 次 


React 和 Vue 的 速度 都 很 快 ， 不 过 显然 Vue 的 演 染 速度 要 更 快 一 些 ， 这 是 因为 React 
中 有 大 量 用 于 提供 警告 和 错误 提示 信息 的 检查 机 制 。 


1.3.3” 轻 量 级 一 一 将 与 核心 库 无 关 的 业务 封装 成 独立 库 


React 和 Vue 都 将 着 重点 放 在 核心 库 上 ， 也 都 有 专门 负责 路 由 和 全 局 状态 管理 等 
功能 的 配套 库 。 例 如 ， 与 React 配 套 的 有 React Router、Redux， 与 Vue 配套 的 有 Vue 


Router、Vuex。 


1.3.4 视图 模板 


React 采用 JSX 演 染 组 件 ， 而 Vue 则 采用 模板 ， 比 如 .vue 后 缀 的 文件 。 
JSX 是 使 用 XML 语法 编写 Javascript 的 一 种 语法 糖 。 语 法 如 下 : 


Class HelloMessage extends React.Component { 
render() { 
return ( 
<div> 
Hello {this.props.name} 
</div> 
); 
}} 


ReactDOM.render( 
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<HelloMessage name="Taylor" />， 
mountNode 


); 

通过 JSX， 我 们 可 以 只 用 Javascript 来 构建 视图 组 件 。 不 过 ， 对 于 从 传统 HIML+ 
CSS+JS 分 离开 发 走向 组 件 化 开发 的 前 端 工 程 师 来 说 ， 这 种 语法 感觉 并 不 友好 。 

Vue 提供 了 更 简单 的 模板 。 语 法 如 下 : 


<template> 
<div class="demo-title">{{title}}</div> 
</template> 


<script> 
export default { 
data () { 
return { 
title: "Hello World' 
} 
} 
} 
</script> 


<style scoped> 

.demo-title { 
font-size: 24px; 
font-weight: 600; 

} 

</style> 


Vue 模板 更 贴 合 HTML， 而 不 是 用 更 高 层 的 东西 去 封装 它 ， 学 习 曲 线 十 分 平缓 。 在 
Vue 模板 的 style 标签 上 标注 scoped 属性 可 划分 作用 域 ， 使 CSS 样式 表 只 作用 于 当前 组 
件 (具体 实现 机 制 将 在 后 续 章 节 中 描述 〉。 

由 于 Vue 模板 更 贴近 原生 ， 因 此 ， 我 们 很 容易 混入 其 他 一 些 东西 ， 比 如 HTML 的 预 
处 理 器 (Pug/Jade 等 ) 、CSS 的 预 处 理 器 (LESS、SASS/SCSS 等 ) ， 以 及 更 高 版 本 (高 
级 ) 的 脚本 语言 (TypeScript、 ES6 Javascript 等 ) 。Vue 模板 的 语法 也 更 符合 传统 开发 习惯 ， 
并 易于 团队 分 析 和 代码 维护 。 


1.3.5 其 他 


除 框架 本 身 外 ，Vue 在 其 他 方面 也 占据 了 一 些 优 势 ， 比 如 Vue 的 状态 管理 库 vuex 
和 路 由 库 vue-router 都 是 由 官方 维护 更 新 ， 从 而 保证 了 这 些 库 与 Vue 本 身 的 统一 性 。 而 
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React 的 相关 库 则 由 社区 进行 维护 ， 不 过 ， 这 也 使 得 React 的 社区 生态 更 加 繁荣 一 些 。 

此 外 ，Vue 提供 了 项 目 快速 构建 工具 一 一 vue-cli 脚手架 ， 提 供 了 包含 npm 依赖 管理 、 
webpack 模块 打包 、vue-router 前 端 路 由 、eslint 语法 检测 、 单 元 测试 等 集成 功能 ， 能 够 让 
开发 者 快速 构建 一 个 高 质量 的 项 目 环境 。 


1.4 Vue 与 Angular 


无 论 在 代码 体积 和 性 能 上 面 ，Vue 都 比 Angularl 、Angular 2 表现 得 优异 许多 ， 这 里 
不 再 袭 述 。 笔 者 选择 了 以 下 几 个 方面 来 对 比分 析 Vue 和 Angular 的 表现 。 


1.4.1 模板 语法 


Vue 的 许多 语法 和 Angular 十 分 相似 ， 可 以 认为 Angular 是 Vue 的 灵感 之 源 。 因 为 万 
雨 溪 当 时 在 Google 创意 实验 室 ， 使 用 的 就 是 Google 主推 的 Angular 框架 。 但 是 ， 随 着 使 
用 程度 不 断 加 深 ， 尤 感觉 Angular 十 分 策 重 ， 因 此 这 才 创 造 了 Vue。 在 Vue 的 诞生 过 程 中 ， 
有 很 多 地 方 都 借鉴 了 Angular 的 语法 习惯 。 


Angular 2 语法 : 

<input type="text" [(ngModel)]="name"/> 
<button (click)="onSave ($event)">Save</button> 
<ul> 


<li *ngFor="letheroofheroes" [title]="hero.name" (click)="delete 
(hero)">{ {hero.name}}</1i> 
</ul> 
<form #heroForm (ngSubmit)="submit()"></form> 


Vue 语法 : 
<input type="text" v-model="name"/> 
<button v-on:click="onSave (Sevent)">Save</button> 
<ul> 
<li Vv-for="heroinheroes" v-bind:title="hero.name" v-on:click="delete 
(hero)">{{hero.name}}</1i> 
</ul> 
<form ref="heroForm" v-on:submit="submit()"></form> 


1.4.2” 脏 检测 
Vue 与 Angular 1 相 比 最 大 的 区 别 在 于 没有 脏 检 测 机 制 。 在 Angular 1 中 存在 多 个 
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watcher， 当 watcher 越 来 越 多 时 ， 检 测 耗 时 会 越 来 越 长 。 因 为 作用 域 中 每 发 生 一 次 变化 ， 
所 有 watcher 都 要 重新 计算 ， 而 一 些 watcher 在 计算 之 后 可 能 又 会 导致 新 的 变化 ， 并 引发 
所 有 watcher 重新 计算 ， 从 而 进入 一 种 无 限 循 环 的 脏 检测 。 

Angular 1 的 处 理 方式 是 设置 循环 上 限 ， 比 如 10 次 ， 当 循环 达到 10 次 ， 即 中 止 循环 。 
显然 ， 这 种 脏 检测 机 制 性 能 十 分 低下 、 耗 时 长 ， 并 不 适合 大 型 Web 应 用 。 

Vue 的 处 理 方式 则 是 全 局 只 设置 一 个 watcher， 用 这 一 个 watcher 来 记录 和 更 新 一 组 
关联 对 象 的 值 ， 从 而 回避 了 脏 检测 的 问题 。 

有 意思 的 是 ，Vue 最 初 是 参考 Angular 的 ， 而 Angular 2 则 借鉴 了 Vue 的 机 制 ， 采 用 
相似 的 设计 来 解决 脏 检测 存在 的 问题 。 


1.4.3 双向 数据 绑 定 


轻 、 重 量 级 框架 划分 的 标准 是 , 是 否 过 分 参与 系统 结构 级 的 架构 和 功能 上 的 伸缩 拓展 。 
和 Vue、React 这 样 的 轻 量 级 框架 相 比 ,Angular 在 单 向 数据 流 的 视图 泻 染 、 事 件 绑 定之 外 ， 
还 参与 了 View 对 Model 层 的 数据 更 新 ， 即 双向 数据 绑 定 。 显 然 ， 它 是 一 个 重量 级 框架 。 

在 单 向 数据 绑 定 中 ， 视 图 模板 和 动态 数据 被 泻 染 成 网 页 后 ， 数 据 流 即 中 止 ， 如 图 
1.12 所 示 。 之 后 ， 由 ViewModel 接手 与 View 层 的 数据 绑 定 。View 层 不 可 以 直接 修改 
Model 层 的 数据 ， 如 果 需 要 修改 Model 层 的 数据 ， 则 由 ViewModel 发 起 请 求 ， 这 中 间 存 
在 ViewModel 和 Model 之 间 的 数据 同步 传输 。 


lew 


图 1.12 单 向 数据 绑 定 


然而 ， 在 双向 数据 绑 定 中 ，Model 和 View 始终 建立 着 联系 ，Model 层 的 数据 也 一 直 
保持 着 真实 的 状态 ， 如 图 1.13 所 示 。 


View 数 据 发 生 改变 时 ， 
框架 将 同步 Model 数 据 
Template De ey ) Cam ) 
Model 数 据 发 生 改 变 时 ， 
框架 将 同步 View 数 据 


图 1.13 双向 数据 绑 定 
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1.4.4 ”学 习 曲 线 


最 后 一 点 ， 广 为 人 知 且 津津 乐 道 的 是 ，Angular 的 学 习 曲 线 十 分 陡峭 ， 初 学 者 可 能 会 
有 一 种 坐 过 山 车 的 感觉 .不 过 , 笔者 在 2016 年 ,接触 过 一 个 使 用 Angular 1 进行 开发 的 项 目 ， 
当时 感觉 坡度 是 有 的 ， 但 没有 那么 夸张 ， 也 可 能 是 因为 应 用 比较 浅 吧 。 

Vue 的 学 习 曲 线 则 较为 平缓 ， 在 Ember、Knockout、Angular、React 等 前 辈 踏 平 的 道 
路 上 ，Vue 有 更 多 趋 于 成 熟 的 最 佳 实践 可 以 拿 来 使 用 ， 也 有 更 多 的 经 验 教训 可 以 参考 ， 
从 而 设计 出 更 简便 的 API 来 实现 更 复杂 的 功能 。 同 时 ， 这 也 有 效 降低 了 团队 开发 成 本 ， 
并 使 得 大 型 Web 项 目的 构建 变 得 更 加 容易 。 


第 2 章 基本 介绍 


本 章 主要 介绍 Vue 项 目 开发 的 一 些 前 置 知识 ， 该 部 分 内 容 包括 Vue 及 其 环境 工 
具 的 安装 使 用 、Vue 实例 的 创建 及 其 生命 周期 和 Vue 的 数据 响应 式 原理 。 

笔者 希望 通过 对 这 些 知识 点 的 描述 ， 使 读者 能 够 对 Vue 所 采用 的 的 一 些 机 制 和 
方法 产生 基本 的 认识 ， 知 道 如 何 上 手 去 用 和 为 什么 要 这 样 用 ， 并 能 将 这 些 内 容 更 好 地 
用 于 实战 开发 。 


2.1 安装 和 引入 


本 节 内 容 将 讲述 如 何在 不 使 用 项 目 构建 工具 的 条 件 下 ， 安 装 和 引入 Vue 及 其 特定 的 
调试 工具 。 

对 于 原 有 的 项 目 来 说 ， 由 于 Vue 是 一 个 轻 量 级 、 渐 进 式 的 JavaScript 框架 ， 所 以 你 
可 以 不 用 考虑 将 原 有 的 技术 架构 直接 引入 Vuejs 进行 开发 。 即 使 在 Angular 的 项 目 中 引 
入 Vuejs 也 是 可 以 的 ， 不 过 基本 没有 人 会 这 么 做 ， 因 为 这 会 使 得 项 目 结构 变 得 混乱 和 难 
以 管理 ， 并 且 完 全 没有 必要 。 这 是 一 个 极端 的 例子 ， 不 过 在 某 些 并 不 极端 的 场合 下 ， 得 
益 于 Vuejs 的 灵活 性 ， 我 们 完全 可 以 直接 引入 Vuejs。 

上 面 所 说 的 “直接 引入 ”是 相对 于 项 目 构 建 工具 引入 而 言 的 。 如 果 要 开发 全 新 的 
Vue 项 目 ， 笔 者 建议 使 用 项 目 构建 工具 Vue CLI， 它 可 以 快速 构建 一 个 “ 开 箱 即 用 ”的 大 
型 单 页 应 用 ， 并 提供 了 优秀 的 构建 配置 。 之 后 ， 开 发 者 只 需要 关注 业务 本 身 和 核心 代码 
的 编写 就 可 以 了 ， 之 后 会 有 专门 的 章节 对 其 进行 描述 。 


2.1.1 如 何 引入 Vuejs 


可 以 在 官网 下 载 Vuejs 的 开发 版 本 和 生产 版 本 ， 如 图 2.1 所 示 ， 并 通过 <script> 标签 
引入 ， 此 时 Vue 会 被 注册 为 全 局 变量 。 


开发 环境 不 要 用 最 小 压缩 版 , 不然 就 失去 了 错误 提示 和 警 洁 ! 


2.1 开发 版 和 生产 版 的 Vue.js 
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当然 也 可 以 用 NPM [Node Package Manager，Node 包 ( 依 赖 ) 管理 工具 ] 安装 。 
NPM 最 初 用 于 管理 和 分 发 Nodejjs 的 依赖 ， 它 自动 化 的 机 制 使 得 层 层 嵌 套 的 依赖 管 
理 变 得 十 分 简单 ， 因 此 后 来 被 广泛 应 用 于 前 端 依赖 的 管理 中 。 你 需要 在 Node 的 官网 下 
载 Node 客户 端 ， 同 时 ， 你 会 得 到 一 个 “附送 的 ”NPM 工具 。 
由 于 NPM 的 仓库 源 布置 在 国外 ， 资 源 传输 速度 较 慢 且 可 能 受制 ， 这 里 ， 笔 者 不 建 
议 直 接 使 用 NPM 安装 其 他 依赖 ， 而 是 使 用 淘宝 镜像 源 的 cnpm。 
(1) 安装 cnpm: 
npm install -g cnpm --registry=https://registry.npm.taobao.org 
(2) 之 后 ， 使 用 cnpm 安装 Vue.js: 
cnpm install vue 
(3) 引入 Vue 模块 : 


import Vue from ‘'vue' 
2.1.2 ”安装 Vue Devtools 


在 Vue 学习 和 开发 之 前 ， 笔 者 建议 在 你 的 浏览 器 (推荐 使 用 Google Chrome) 上 先 
安装 Vue Devtools 拓展 程序 。Vue Devtools 提供 了 一 个 界面 ， 可 以 帮助 我 们 查看 Vue 组 
件 和 全 局 状态 管理 器 Vuex 中 记录 的 数据 。 

有 条 件 访问 国外 受 限 网 站 的 读者 ， 可 以 直接 访问 Google Web Store， 搜 索 vuejs- 
devtools 进行 安装 。 

没有 条 件 的 同学 只 好 跟着 笔者 手动 安装 了 。 

(1) 下 载 Vue Devtools (不 了 解 Git 的 同学 可 以 查看 附录 相关 内 容 ) 。 
git clone https://github.com/vuejs/vue-devtools.git 

(2) 进入 vue-devtools 目录 下 ， 安 装 构建 工具 所 需要 的 依赖 。 

cnpm install 

(3) 构建 工具 ， 出 现 类 似 如 图 2.2 中 的 信息 即 表示 构建 成 功 。 


npm run build 
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图 2.2 构建 vue-devtools 


(4) 打开 Chrome 扩展 程序 ， 如 图 2.3 所 示 。 
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2.3 Google Chrome 拓展 程序 


(5) 在 扩展 程序 界面 中 ， 开 启 “开发 者 模式 ” “开发 者 模式 ”为 关闭 状态 时 ， 搜 
索 栏 下 的 按钮 将 被 隐藏 ) ， 并 点 击 “ 加 载 已 解压 的 扩展 程序 ”， 选 择 “shellchome” 文 
件 夹 进行 安装 ， 如 图 2.4 所 示 。 


2.4 ”安装 vue-devtools 
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(6) 再 次 打开 Vue 项 目 时 ， 我 们 就 可 以 在 Chrome 调试 工具 中 通过 vue-devtools 查 


看 组 件 状态 了 ， 如 图 2.5 所 示 。 


Welcome to Your Vue.js App 


2.5 使 用 vue-devtools 查看 组 件 状态 


2.2 ”Vue 实例 介绍 


Vue 应 用 的 开发 离 不 开 Vue 实例 ， 下 面 笔 者 将 创建 一 个 简单 的 Vue 实例 并 观察 实例 
从 创建 到 销毁 的 完整 生命 周期 。 


2.2.1 简单 实例 
一 个 简单 的 Vue 实例 ， 代 码 如 下 : 


<div id="app"> 
<hl>{{ title }}</hl> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></ 
script> 
<script type="text/javascript"> 
var vm = new Vuel({ 
el: '#app', // 绑 定 (mount ) 到 DOM 上 
data () { 
return { 
title: "Hello World' 
} 
} 
}) 
</acript> 


在 这 个 实例 中 ， 笔 者 初始 化 了 带 有 title 数据 的 vm 对 象 ， 并 将 其 绑 定 到 id 为 app 的 
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DOM 节点 上 。 

初始 化 时 ， 在 实例 上 绑 定 的 常规 数据 对 象 会 被 Vue 转化 为 被 观察 的 拥有 可 响应 行为 
的 对 象 。 简 单 地 说 ， 就 是 当 数据 发 生变 化 时 ， 会 同步 更 新 其 数据 链 和 作用 域 中 所 有 的 相 
关 状 态 。 最 常见 的 情况 就 是 ， 当 实例 数据 发 生变 化 时 ， 视 图 也 随 之 改变 ， 如 图 2.6 所 示 。 


Hello World 


Hello Universe 


图 2.6 Vue 实例 


2.2.2 ”生命 周期 


Vue 实例 在 初始 化 时 需要 经 历 一 系列 过 程 ， 比 如 编译 模板 、 演 染 虚拟 DOM 树 、 将 
实例 挂 载 到 DOM 上 、 设 置 数据 监 听 和 数据 绑 定 等 。 在 这 些 过 程 中 也 会 运行 一 些 钩子 函数 ， 
允许 开发 者 在 不 同 的 阶段 注入 自己 的 代码 。 

下 面 ， 笔 者 将 上 一 小 节 中 的 简单 实例 稍微 改造 一 下 ， 为 其 绑 定 钩子 函数 并 打印 标识 
信息 ， 用 以 观察 这 些 钩子 函数 执行 的 时 机 。 

改造 后 的 实例 代码 如 下 《关于 Vue 的 语法 ， 笔 者 将 在 之 后 的 章节 中 详细 讲解 ) : 


<div id="app"> 
<h1l>{{ title }}</hl> 
<button @click="randomTitle() "> 改变 title</button> 
<button eclick="destoryVm () "> 销毁 实例 </button> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
Var vm = new Vuel({ 
el: '#app', // mount 到 DoME 上 
data () { 
return { 
title: "Hello World'" 
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} 
}, 
methods: { 
randomTitle () { 
this.title = 'Hello ' + ['China', 'World', ‘'Universe'] [Math. 
floor (Math.random() * 2.999)] 
}, 
destoryvm () { 
this.s$destroy () 
} 


}, 

// 实例 初始 化 之 后 ， 数 据 观测 和 事件 绑 定之 前 

beforeCreate () { 
console.1og('before create') 


}, 

// 实例 初始 化 完成 ， 挂 载 尚未 开始 时 

created () { 
console.log('created') 


}, 

// 挂 载 之 前 ，render 函 数 首次 被 调用 时 

beforeMount () { 
console.1og('before mount') 


}, 

// 在 实例 挂 载 到 DOM 节 点 上 之 后 

mounted () { 
console.1og('mounted' ) 


}, 

// 数据 更 新 时 ， 在 虚拟 DOM 状 态 变化 之 前 

beforeUpdate () { 
console.1og('before update') 


}, 

// 虚拟 DOM 被 重新 泻 染 之 后 

updated () { 
console.1og('updated' ) 


]} 

// 实例 销毁 之 前 ， 此 时 实例 依然 可 用 

beforeDestroy () { 
console.log('before destroy') 


}, 
// 实例 销毁 后 ， 此 时 Vue 实 例 及 其 子 实例 将 完全 解 绑 
destroyed () { 
console.log('destroyed') 
} 
}) 
</script> 


刚 打开 页 面 , 即 Vue 实 例 刚 被 创建 并 挂 载 到 DOM 上 时 , 调用 的 钩子 函数 如 图 2.7 所 示 。 
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Hello World 


改变 tile | | 铺轨 实例 


2.7 ”创建 和 挂 载 时 


当 实 例 数据 发 生变 化 并 触发 视图 更 新 时 ， 调 用 的 钩子 函数 如 图 2.8 所 示 。 


Hello Universe 


改变 itla | | 销 疫 实则 


2.8 数据 更 新 时 


当 实 例 被 销毁 时 ， 调 用 的 钩子 函数 如 图 2.9 所 示 。 


Hello Universe 
改变 Me | | 铺 贤 实例 


destreyed 


图 2.9 实例 被 销毁 时 
之 后 ， 多 次 点 击 “ 改 变 tile” 按 钮 ， 视 图 不 再 响应 数据 变化 ， 如 图 2.10 所 示 ， 因 为 
此 时 节点 上 绑 定 的 Vue 实例 已 被 销毁 。 


Hello Universe 


[te | | 名 全 | 


图 2.10 实例 被 销毁 时 


笔者 参照 官方 译 制 了 一 份 包含 核心 概念 的 生命 周期 图 ， 如 图 2.11 所 示 。 现 阶段 ， 
同学 们 只 需要 对 此 稍微 了 解 即 可 ， 并 不 需要 深入 研究 ， 这 些 并 不 影响 你 成 为 一 名 优秀 的 
Vue 开发 者 。 本 节 的 意图 也 只 在 于 描述 这 样 一 个 周期 流程 及 于 何 时 何 处 去 使 用 这 些 钧 子 
函数 , 对 实现 机 制 感 兴趣 的 同学 可 以 深入 框架 源码 研究 并 欢迎 随时 通过 邮件 与 笔者 交流 。 
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beforeCreate 


*# 如 果 受 用 像 单 文件 组 件 一 样 的 构建 方式 ， 模 板 编译 将 会 提前 执行 。 
图 2.11 生命 周期 图 
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随 着 实战 经 验 的 不 断 累 积 ， 这 张 图 或 将 对 学 习 和 开发 产生 更 高 的 参考 价值 。 


2.3 数据 响应 式 原理 


Vue 中 最 重要 的 概念 就 是 响应 式 数据 ， 一 方面 指 衍生 数据 和 元 数据 之 间 的 响应 ， 通 
过 数据 链 来 实现 ， 另 一 方面 则 是 指 视图 与 数据 之 间 的 绑 定 。 

本 节 将 深入 讲解 这 两 方面 的 内 容 。 
2.3.1 初 识 数据 链 


数据 链 在 学 术 上 被 定义 为 连通 数据 的 链 路 。 在 这 条 链 路 上 有 一 到 多 个 数据 起 点 〈 元 
数据 ) ， 并 通过 该 点 不 断 衍 生 拓展 新 的 节点 (衍生 数据 ， 形 成 一 个 庞大 的 网 状 结构 。 
当 你 修改 数据 起 点 时 ， 所 有 存在 在 网 上 的 节点 值 都 将 同步 更 新 ， 如 图 2.12 所 示 。 


(b=a*3-2 ) (c=a%3+1 ) ( d=a%3 ) 


( eb+2 ( fbte ) ( ged ) 


图 2.12 单一 起 点 的 数据 链 路 


2.12 是 只 有 一 个 起 点 的 数据 链 , 结构 比较 简单 , 当 链 路 存在 的 数据 起 点 越 来 越 多 时 ， 
结构 会 变 得 越 来 越 复杂 ， 如 图 2.13 所 示 。 


c=a*2+2 d=atb*2 ) e=b/2 
J \ 


图 2.13 多 起 点 的 数据 链 路 


得 益 于 数据 链 ， 在 Vue 中 我 们 可 以 通过 修改 元 数据 的 值 来 触发 一 系列 数据 的 更 新 。 
当然 ， 我 们 在 做 数据 结构 的 设计 时 ， 应 该 尽量 降低 数据 链 的 复杂 度 。 毕 竟 ， 代 码 是 给 机 
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器 读 的 ， 但 也 是 给 人 看 的 。 


2.3.2 ”函数 式 编程 
在 上 一 小 节 中 ， 元 数据 a 和 b 通过 变量 声明 即 可 实现 : 


let a=3,b=4 

但 是 衍生 数据 应 该 怎样 实现 从 而 保证 其 值 只 依赖 于 元 数据 而 不 允许 被 外 界 修改 呢 ? 
这 里 先 介绍 一 下 函数 式 编程 的 概念 。 

函数 式 编程 (Functional Programming) 是 一 种 结构 化 编程 方式 ， 力 求 将 运算 过 程 写 
成 一 系列 嵌 套 的 函数 调用 。 

源 于 JS 中 “万 物 皆 对 象 ”的 理念 ， 函 数 式 编程 认定 函数 是 第 一 等 公民 ， 可 以 赋值 给 
其 他 变量 、 用 作 另 一 个 函数 的 参数 或 者 作为 函数 返回 值 来 使 用 。 
由 于 其 作用 是 处 理 运算 ， 因 此 函数 体 只 能 包含 运算 过 程 ， 而 且 必 带 返回 值 〈 在 实际 
开发 中 ， 不 做 IO 读 写 操作 是 不 可 能 的 ， 不 过 要 把 IO 限制 到 最 小 ) ， 标 准 格式 如 下 ; 


let double = function (num) { 
return num * 2 


函数 式 编 程 的 核心 是 根据 元 数据 生成 新 的 衍生 数据 ， 提 供 唯 一 确定 的 输入 ， 函 数 将 
返回 唯一 确定 的 输出 ， 它 并 不 会 修改 原 有 变量 的 值 。 这 在 运用 JS 闭 包 概念 进行 开发 时 万 
为 重要 ， 在 函数 作用 域内 调用 域外 或 全 局 的 变量 时 并 不 会 修改 它们 的 值 ， 安 全 无 污染 。 

最 后 一 点 ， 使 用 函数 式 编程 (加 lambda 表达 式 之 后 ) 可 以 使 代码 看 起 来 十 分 高 大 上 ， 
如 以 下 代码 所 示 : 


let x = (x => (x => x * 9) (x) + 3) (5) 
let y= y=> (y=>y* 9)(Y) +3 
console.1og (x) 

console.log(y(5)) 


这 样 的 编程 方式 可 使 代码 变 得 极其 简洁 ， 但 也 极其 难 读 。 上 面 只 是 一 个 基本 示例 ， 
实际 开发 中 能 演化 出 无 限 复杂 的 结构 ， 感 兴趣 的 同学 可 以 推算 一 下 示例 的 结果 并 运行 验 
证 一 下 。 

通过 函数 式 编程 ， 衍 生 数据 也 得 以 实现 。 实 际 上 ， 函 数 式 编程 就 是 建立 了 一 条 数据 
流通 的 链 路 ， 开 发 者 只 需要 关注 输入 和 输出 两 端的 内 容 就 可 以 ， 这 是 封装 复 用 的 一 种 最 
佳 实践 ， 在 高 效 开发 中 举足轻重 。 
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2.3.3 ”Vue 中 的 数据 链 


Vue 实例 提供 了 computed 计算 属性 选项 ， 以 供 开发 者 生成 衍生 数据 对 象 。 昌 然 计 
算 属 性 以 函数 形式 声明 ， 却 并 不 接受 参数 ， 也 只 能 以 属性 的 方式 调用 。 由 于 计算 属性 的 
this 指向 Vue 实例 ， 所 以 它 可 以 获取 实例 上 所 有 已 挂 载 的 可 见 属性 。 下 面 来 看 一 个 示例 : 


<style> 
#app { 
font-family: Roboto, sans-serif; 
Color: #363e4f; 
} 
.data-label { 
display: inline-block; 
width: 160px; 
} 
</style> 
<div id="app"> 
<p><strong class="data-label">A</strong><input type="text" v-model="a"></p> 
<p><strong class="data-label">B</strong><input type="text" v-model="b"></p> 
<p><strong class="data-label">C=A*2+2</strong>{{ c }}</p> 
<p><strong class="data-label">D=A+B*2</strong>{{ d }}</p> 
<p><strong class="data-label">E=B/2</strong>{{ e }}</p> 
<p><strong class="data-label">F=C+D</strong>{{ f }}</p> 
<p><strong class="data-label">G=D-E</strong>{{ g }}</p> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
let vm = new Vuel({ 
el: '#app', 
data () { 
return { 
省 是 .3 
时 二 法 


}, 
computed: { // 计算 属性 
C () 
return this.a* 212 
} 
Q () { 
return Number (this.a) + this.bp * 2 
}, 
e () { 
return this.b / 2 
]} 
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表 : 
return Number (this.c) + Number (this.d) 
jyv 
9 () { 
return this.d - this.e 
} 
} 
}) 


</script> 

初始 结果 如 图 2.14 所 示 。 
A 3 
B 4 
C=A*2+2 8 
D=A+B*2 11 
E=B/2 2 
F=C+D 19 
G=D-E 9 


图 2.14 A 和 B 为 初始 值 时 


当 修 改元 数据 A 和 B 时 ， 运 行 结果 如 图 2.15 所 示 。 


A 日 
B I6 
C=A*2+2 2 
D=A+B*2 17 
E=B/2 3 
F=C+D 29 
G=DE 14 


图 2.15 修改 A 和 B 的 值 之 后 


当然 ， 开 发 者 也 可 以 以 函数 的 形式 创建 数据 链 以 实现 数据 之 间 的 响应 ， 如 下 代码 : 
methods: { 
gete (SEE { 
return this.a * 2 + (suf || 2) 
直 
} 
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2.3.4 数据 绑 定 视图 
这 是 一 个 含有 字符 串 类 型 属性 profile 的 对 象 : 


let obj = { 
profile: ' 
} 


不 过 ， 身 为 对 象 属性 的 profile 仅仅 只 是 个 字符 串 吗 ? 笔者 在 控制 台中 使 用 Object 
API 中 的 getOwnPropertyDescriptor 方法 将 其 “内 在 ”打印 出 来 ， 如 图 2.16 所 示 。 


图 2.16 深入 对 象 属性 


原来 ， 对 象 属性 内 藏 乾坤 ， 我 们 甚至 可 以 使 用 Object API 的 defineProperty 方法 对 其 
配置 ， 属 性 配置 项 〈 描 述 符 ) 如 表 2.1 所 示 。 


表 2.1 对 象 属性 配置 表 
configurable 标识 属性 配置 是 否 可 更 改 和 该 属性 能 否 从 对 象 中 删除 
enumerable | false 标识 属性 是 否 可 被 枚 举 


标识 属性 是 否 可 通过 冉 值 运算 符 修改 ， 不 与 set 共存 
属性 值 ， 可 为 任意 JS 数据 类 型 ， 不 与 set 共存 
函数 类 型 ， 属 性 被 赋值 时 调用 
[st wdefned 。 | 函数 类 型 ， 返 回 值 将 作为 局 性 人 ”| 


在 这 里 可 以 停顿 一 下 ， 想 一 想 ， 对 象 属性 被 赋值 时 调用 的 set 有 何 妙 用 呢 ? 
下 面 来 看 一 段 有 关 defineProperty 的 代码 : 
<span id="harry" style="line-height: 32px;">&nbsp;</span><br> 
<input id="trigger" type="text"> 
<script type="text/javascript"> 

let harry = document .getElementById('harry') 
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let trigger = document .getElementById('trigger') 
let key = 'profile' // 对 象 属性 键 名 


let store = {} // 辅助 get 取 值 
let obj = { // 对 象 
profile: ' 


Object .defineProperty (obj, key, { 
set (value) { 
harry.innerText = value // 重点 : 修改 DOM 节 点 视图 
store [key] = value 
]}， 
get () { 
return store[key] 
} 
}) 
trigger.addEventListener('keyup', function () { 
obj[key] = this.value 
console.1og (obj [key]) 
}) 
</script> 


上 述 代码 中 ， 笔 者 在 对 象 属性 的 setter 函数 中 修改 文本 节点 的 值 ， 所 以 当 obj.profile 
被 重新 赋值 时 ， 节 点 视图 也 会 同步 更 新 ; 然后 对 输入 框 添加 事件 监听 (addEventListener) ， 
当 用 户 事件 触发 时 ， 输 入 值 将 被 赋 于 obj. profile。 以 此 方式 ， 我 们 实现 了 数据 与 视图 之 间 
的 “双向 绑 定 ”， 这 也 是 Vue 数据 与 视图 绑 定 的 实现 原理 。 


代码 运行 结果 如 图 2.17 所 示 。 
RO Hements Console Network » 
nice 9 © top » | Fite Defautt lev 
nicel | 


nic 


图 2.17 ”数据 与 视图 绑 定 


在 Vue 中 ， 当 我 们 把 普通 的 JavaScript 对 象 传 给 Vue 实例 的 data 选项 时 ，Vue 将 遍 
历 对 象 属性 ， 并 使 用 ObjectdefineProperty 将 其 全 部 转化 为 getter/setter， 并 在 组 件 泻 染 时 
将 属性 记录 为 依赖 。 之 后 当 依赖 项 的 setter 函数 被 调用 时 ， 会 通知 watcher 重新 计算 并 更 
新 其 关联 的 所 有 组 件 。 

由 于 ObjectdefineProperty 是 ES5 中 一 个 无 法 shim 〈 自 定义 拓展 ) 的 特性 ， 所 以 Vue 
无 法 运行 在 不 支持 Object.defineProperty 的 IE8 及 其 以 下 版 本 浏览 器 上 。 


Ny 
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本 章 重点 讲述 Vue 框架 的 基本 语法 ， 并 通过 一 些 基本 示例 的 演示 以 使 同学 们 产 
生 更 形象 的 认识 。 对 有 过 类 似 MVVM 框架 使 用 经 验 的 同学 来 说 ， 本 章 内 容 应 该 较为 
简单 ， 而 初次 尝试 此 类 框架 的 同学 ， 也 不 必 担 心 ， 只 需 跟着 示例 动手 操作 ， 相 信也 可 
以 快速 上 手 。 


3.1 播 值 绑 定 


插值 绑 定 是 Vue 中 最 常见 、 最 基本 的 语法 ， 绑 定 的 内 容 主 要 有 文本 插值 和 HIML 插 
值 两 种 。 


3.1.1 文本 插值 


文本 插值 的 方式 十 分 简单 ， 只 要 用 双 大 括号 (Mustache 语法 ) 将 要 绑 定 的 变量 、 值 、 
表达 式 括 住 就 可 以 实现 ，Vue 将 会 获取 计算 后 的 值 ， 并 以 文本 的 形式 将 其 展示 出 来 。 
下 面 一 段 代码 演示 了 文本 插值 的 基本 用 法 : 


<style> 
.profile { 
display: inline-block; 
width: 300px; 
$ 
/atyle> 
<div id="app" style="margin-left: 300px;"> 
<h2> 文 本 插值 </h2> 
<p><label class="profile"> 变 量 :</label> {{ num }}</p> 
<p><label class="profile"> 表 达 式 :</label> {{ 5 + 10 }}</p> 
<p><label class="profile"> 三 目 运 算 符 :</label> {{ true ? 15 : 10 }}</p> 
<p><label class="profile"> 函 数 :</label> {{ getNum() }}</p> 
<p><label class="profile"> 匿 名 函数 :</label> {{ (() => 5 + 10) () }}</p> 
<p><label class="profile"> 对 象 :</label> {{ {num: 15} }}</p> 
<p><label class="profile"> 函 数 对 象 :</1abe1> {{ getNum }}</p> 
<p><label class="profile">html 代 码 ( 表达 式 ) :</label> {{ '<span>15</span>' 
}1</p> 
<p><label class="profile">html 代 码 (变量 ) :</label> {{ html }}</p> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
let vm = new Vuel({ 
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el: '#app', 
data () { 
return { 
num: 15, 
html: '<span>15</span>"' 
} 
}, 
methods: { 
getNum () { 
return this.num 
} 
} 
} 


</script> 
运行 结果 如 图 3.1 所 示 。 
文本 插值 
变量 15 
未 达 式 : 15 
三 目 运 莫 符 : 15 
四 站 15 
匿名 却 歼 : 15 
对 象 { "num “15) 
函数 对 象 : function 0 { [native code] ) 


html 代 码 《要 达 式 ) 15 


html 代 三 【 交 量 ) <span>15</span> 


图 3.1 文本 插值 的 基本 用 法 


关于 图 3.1 中 “html 代码 (表达 式 ) ”和 “html 代码 (变量 ) ”的 差异 , 这 里 要 稍 作 解 释 。 
昌 然 两 者 绑 定 的 内 容 是 一 样 的 ， 但 是 对 于 前 者 来 说 ，Vue 优先 解释 了 DOM 节点 span， 
并 隔离 了 “{{” 和 “}}”， 所 以 插值 语法 并 没有 生效 ，“{{” 和 “}}” 还 被 当 作 了 p 节 
点 的 文本 内 容 。 

可 以 看 到 ， 无 论 是 变量 、 表 达 式 、 执 行 函数 还 是 DOM 代码 ，Vue 都 只 将 结果 当 作 
文本 处 理 。 另 外 ， 如 果 插 值 绑 定 的 内 容 是 变量 或 与 变量 有 关 ， 当 变量 的 值 改变 时 ， 视 图 
也 会 同步 更 新 。 


3.1.2 HTMI 插 值 


HTML 插值 可 以 动态 泻 染 DOM 节点 ， 常 用 于 处 理 开 发 者 无 可 预知 和 难以 控制 的 
DOM 结构 ， 如 泻 染 用 户 随意 书写 的 文档 结构 等 ， 这 在 一 些 论坛 和 博客 平台 上 可 以 看 到 ， 
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下 面 来 看 一 段 相关 代码 : 


<style> 
-align-center { 
text-align: center; 
} 
</style> 
<div id="app" style="width: 800px;margin: 0 auto;"> 
<div>{{ blog }}</div> 
<hr> 
<div v-html="blog"></div> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"><73cript> 
<script type="text/javascript"> 
let vm = new Vuel({ 
el: "#app’, 
data () { 
return { 
blog: `<h2 class="align-center"> 一 对 "兄弟 "</h2> 
<div class="align-center"> 
<img src="http://img.hb.aicdn.com/76c310ae6a6c6166343a23 
821078d379367f003e2088d-xWozMi fw658"> 
</div> 
<p> 你 看 他 们 多 像 一 对 兄弟 啊 ， 虽 然 是 一 只 呆 呆 兔 和 一 只 傻 傻 猫 蹲 在 了 一 起 ， 但 谁 又 能 
说 他 们 不 是 兄弟 呢 ? </p> 
} 
} 
}) 
</script> 


运行 结果 如 图 3.2 所 示 。 


hz class="align-center»— 对 “ 宛 交 ”</h2> <div class="alion-center"> <img 
sre="http//img hb aicdn.com/76c310ae636c6166343323821078d3793671003e2088d-xWozIMi_fw658"> 
</div> <P> 你 午 他 们 大 像 一 对 兄 入 有 ， 量 然 呈 一 夫 几 琳 旬 和 一 灾 信 德 叶 加 在 了 一 翅 ， 但 淮 也 能 说 他 们 不 中 宛 冰 
?</p> 


一 对 “兄弟 ” 


你 看 他 们 多 像 一 对 兄弟 嘎 ， 王 矢 导 一 只 果 采 免 和 一 只 全 全 闪光 在 了 一 起 、 但 淮 又 能 涪 他 们 下 呈 兄 弟 了 


图 3.2 文本 插值 与 HTML 插值 的 对 比 
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从 图 3.2 中 可 以 看 到 ， 文 本 插值 中 的 代码 被 解释 为 节点 的 文本 内 容 ， 而 HTML 插值 
中 的 代码 则 被 泻 染 为 视图 节点 。 

实际 上 ，HTML 插值 是 对 文本 插值 的 补充 和 拓展 ，Vue 可 以 解析 被 绑 定 的 内 容 为 
DOM 节点 ， 从 而 实现 动态 泻 染 视图 的 效果 。 不 过 Vue 本 身 就 支持 模板 ， 开 发 者 在 使 用 
HTML 插值 时 应 秉承 以 下 原则 : 

@ 尽量 多 地 使 用 Vue 自身 的 模板 机 制 ， 减少 对 HIML 插值 的 使 用 ; 

@ 只 对 可 信 内 容 使 用 HTML 插值 ; 

@ 绝 不 相信 用 户 输入 的 数据 。 


3.2 属性 绑 定 


除了 文本 之 外 ，DOM 节点 还 有 其 他 一 些 重要 的 属性 ， 那 么 Vue 是 如 何 绑 定 这 些 属 
性 的 呢 ? 


3.2.1 指令 v-bind 
DOM 节点 的 属性 基本 都 可 以 用 指令 v-bind 进行 绑 定 ， 代 码 如 下 : 


<style> 
.italic { font-style: italic; } 
</style> 
<div id="app" style="margin-left: 300px;"> 
<p Vv-bind:class="className" v-bind:title="title"> 危 险 勿 触 </P> 
<button v-bind:disabled="10 + 10 === 20"> 点 击 有 奖 </button> 
<input v-bind:type="'text'" v-bind::placeholder="true ? ' 请 输入 ' :，' 
请 录入 '"> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
let vm = new Vuel({ 
el: '#app', 
data () { 
return 1{ 
className: 'italic'， 
title: "危险 勿 触 ' 
} 
} 
}) 
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</script> 


Vv-bind 也 可 以 省 略 不 写 ， 代 码 如 下 : 


<p :class="className" :title="title"> 危 险 勿 触 </p> 


<button :disabled="10 + 10 === 20"> 点 击 有 奖 </button> 
<input :type="'text'" :placeholder="true ? ' 请 输入 ' : ' 请 录入 '"> 
运行 结果 如 图 3.3 所 示 。 

店 验 筷 部 


点 击 有 奖 | 清宫 六 


3.3 ”属性 绑 定之 v-bind 


属性 也 可 以 绑 定 变量 、 表 达 式 、 执 行 函数 等 内 容 ， 不 过 最 终 的 结果 都 应 该 满足 属性 
自身 的 约束 。 


3.2.2 ”类 名 和 样式 绑 定 


由 于 类 名 class 和 样式 style 在 节点 属性 中 是 两 个 比较 奇怪 的 存在 〈 虽 然 他 们 可 接收 
的 类 型 都 是 字符 串 ， 但 类 名 实际 上 是 由 数组 拼接 而 成 ， 而 样式 则 是 由 对 象 键 值 对 拼接 而 
成 的 ) ， 所 以 Vue 在 绑 定 类 名 和 样式 时 也 采用 不 一 样 的 机 制 。 

我 们 可 以 通过 字符 串 、 数 组 和 对 象 三 种 方式 为 节点 动态 绑 定 类 名 属性 ， 代 码 如 下 : 


<style> 
.Color-gray { color: gray; } 
.Size-18 { font-size: 18px; } 
.style-italic { font-style: italic; } 
</style> 
<div id="app"> 
<p class="color-gray size-18 style-italic">《Vue2.0 从 入 门 到 实战 》， 用 
心 良 苦 ， 伴 你 成 长 </p> 
<p :class="classStr">《Vue2.0 从 入 门 到 实战 》， 用 心 良 苦 ， 伴 你 成 长 </p> 
<p :class="classArr">《Vue2.0 从 入 门 到 实战 》， 用 心 良 苦 ， 伴 你 成 长 </p> 
<p :class="class0bj1">《Vue2.0 从 入 门 到 实战 》， 用 心 良 苦 ， 伴 你 成 长 </P> 
<p :class="class0bj2">《Vue2.0 从 入 门 到 实战 》， 用 心 良 苦 ， 伴 你 成 长 </p> 


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
SD/acript> 
<script type="text/javascript"> 
let vm = new Vuel({ 
el: '#app", 
data () { 
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return { 
classStr: 'color-gray size-18 style-italic'， // 拼接 字符 串 
classArr: ['color-gray'，'"size-18'，'"style-italic']， // 数组 
classobjl: { // 对 象 ， 绑 定 类 名 
"Color=gray'" : true, 
'size-18': true, 
'style-italic': true 
}, 
classobj2: { // 对 象 ， 未 绑 定 类 名 
"color=gray”:. 05 
"ede Ls Tn 


nabvie- Earien false 
} 
} 

} 
}) 

</script> 

在 使 用 对 象 绑 定 类 名 时 ， 应 将 类 名 作为 对 象 键 名 ， 当 键 值 被 判定 为 真 时 ， 类 名 将 被 
绑 定 到 节点 上 。 


这 里 稍 作 拓展 ， 谈 一 谈 JS 中 关于 真 和 假 的 知识 点 。 当 变量 值 为 undefined、null、 值 
为 0 的 数字 、 空 字符 串 时 ， 也 会 被 判定 为 假 ， 除 一 般 值 外 ，[]、 人 好 、-1、-0.1 也 会 被 判定 
为 真 。 示 例 代码 运行 结果 如 图 3.4 所 示 。 


1368"768» x 769 100% Online™ 


(Vue20 MA TLE) , BRE ja 
ic"> (Vue2.9 从 入 门 剖 实 
《Vue2.9 从 入 门 到 实 
ic"7YVus2.9 从 入 门 到 实 
《Vue2.8 从 入 门 到 实 
， 伴 你 成 长 </p 

nadel yr net /oom/ vue 5 16/dHst 


i cn 
type="text/javascript"»</script- 


(Vue20 MA THESE , 3 


(Vue20MA 门 到 六 4 好 ， 让 心 户 言 ， 


att 


(Vue20 MAI TER , BURE, 人 这 


《Vue2.0 从 入 门 到 实战 》， 用 心 良 苦 ， 伴 你 成 长 


/bedy 
/htal 


3.4 类 名 的 动态 绑 定 


从 图 3.4 中 可 以 看 到 ， 三 种 方式 绑 定 类 名 的 效果 是 一 致 的 ， 但 由 于 classObj2 中 的 键 
值 全 部 被 判定 为 假 ， 所 以 类 名 并 未 被 绑 定 到 对 应 节点 上 。 

绑 定 样式 的 方式 与 类 名 相似 ， 不 过 样式 是 以 键 值 对 的 形式 ， 所 以 不 能 像 类 名 一 样 使 
用 数组 进行 绑 定 ， 示 例 代码 如 下 : 


<div id="app"> 
<p style="color: gray;font-size: 18px;font-style: italic;"> (Vue2.0 
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从 入 门 到 实战 》， 用 心 良 苦 ， 伴 你 成 长 </p> 
<p :style="stylestr">《Vue2.0 从 入 门 到 实战 》， 用 心 良 苦 ， 伴 你 成 长 </p> 
<p :style="styleobjl">《〈Vue2.0 从 入 门 到 实战 》， 用 心 良 苦 ， 伴 你 成 长 </p> 
<p :style="style0bj2">《Vue2.0 从 入 门 到 实战 》， 用 心 良 苦 ， 伴 你 成 长 </p> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
let vm = new Vue({ 
el: '#app', 
data () { 
return { 
stylestr: "color: gray;font-size: 18px;font-style: italicz'， // 拼 
接 字符 串 
styleobjl: { // 对 象 ， 绑 定 样式 
"BOLOr"s = 2 "gray” “blackKy 
'font-size': '18px', 
'font-style': "italic'" 


}, 
styleobj2: { // 对 象 ， 未 绑 定 样式 
用 全 0 3 Wray as 
Fomor 3 
'font-style': null ? 'italic' : '' 
} 
} 
} 
抽 
</sCript> 
运行 结果 如 图 3.5 所 示 。 
1368*7687 6l x 76 100% Online™ 对 1 | Elements Console Network Sources » i x 
ta 
1 -cheod 
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/ heal 


图 3.5 样式 的 动态 绑 定 


类 名 绑 定 和 样式 绑 定 ， 实 质 上 都 是 由 JS 来 决定 采用 哪 种 样式 表演 染 视图 。 在 实际 开 
发 中 , 它 的 应 用 场景 十 分 广泛 ， 比 如 需要 针对 不 同 的 数据 类 型 采用 不 同 的 演 染 策略 时 (如 
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数值 小 于 0 时 ， 字 体 颜 色 使 用 红色 ) 、 视 图 状态 可 发 生 有 限 种 类 切换 时 〈 如 下 拉 菜 单 展 
开 时 ， 控 制 按钮 箭头 向 上 ， 收 缩 时 ， 旋 转 按钮 180” 使 箭头 向 下 ) 或 者 辅助 CSS 媒体 查 
询 进 行 响应 式 布 局 时 〈 如 卡片 ， 在 PC 和 Pad 端 占 据 20% ~ 33% 的 宽度 ， 在 手机 端 占据 
100% 的 宽度 ) 等 。 


3.3 事件 绑 定 


事件 系统 是 前 端 开发 中 非常 重要 的 内 容 ，Vue 也 对 其 进行 了 封装 和 拓展 ， 使 之 变 得 
更 加 简单 易 用 。 


3.3.1 指令 v-on 


Vue 使 用 v-on 指令 监听 DOM 事件 ， 开 发 者 可 以 将 事件 代码 通过 v-on 指令 绑 定 到 
DOM 节点 上 ， 基 本 使 用 方法 如 下 : 


<div id="app"> 
<button Vv-on:click="logInfo() "> 打印 消息 (default: Hello World)</button> 
<br> 
<button v-on:click="logInfo('Self Message')"> 打 印 消息 (Self Message)</ 
button> 
<br> 
<button v-on:click="console.1og('R Vue App')"> 打 印 消 息 (A Vue App)</ 
button> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
let vm = new Vuel({ 


el: '#app', 
methods: { 
logInfo (msg) { 
console.log(msg || "Hello World') 
} 
</script> 


Vue 也 为 v-on 提供 了 一 种 简写 形式 @， 代 码 如 下 : 


<button @click="logInfo()"> 打 印 消 息 (default: Hello World) </button> 
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运行 结果 如 图 3.6 所 示 。 
3 加 | Eements Console > i x 
加 8 |top | Filte Defaultlevels” 中 
一 ER Hello World jindex.html:28 
打印 消息 (default Hello World) | Self Message index.html:29 
条 印 消息 (Self Message) A Wn Yee2:3 
条 印 消息 (A Vue App) 


图 3.6 事件 绑 定之 v-on 


有 时 候 , 我 们 在 处 理事 件 时 也 会 用 到 事件 对 象 本 身 ， 那 么 应 该 怎样 获取 事件 对 象 呢 ? 
这 里 ， 笔 者 介绍 两 种 方式 ， 代 码 如 下 : 
<div id="app"> 
<!-- 1. 在 事件 函数 不 必 传 参 时 ， 可 以 这 样 写 ， 注 意 : 不 能 带 () --> 
<input type="text" Q@keyup="handleKeyUp"> 
<br> 
<!-- 2. 手动 传人 $event 对 象 --> 
<input type="text" @keyup="handleKeyUp ($event)"> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
let vm = new Vuel({ 
el: '#app', 
methods: { 
handleKeyUp (event) { 
console.log (event .key, event) 
} 
} 
} 
</script> 


运行 结果 如 图 3.7 所 示 〔 两 种 方式 都 成 功 打 印 出 了 事件 对 象 》。 

也 许 有 的 读者 会 有 疑问 ， 如 果 事 件 绑 定 只 是 onclick 和 @click 写法 上 的 不 同 ， 那 么 
Vue 封装 它 的 意义 又 何在 呢 ? 

实际 上 ， 写 法 的 不 同 只 是 为 了 避免 混淆 和 冲突 ， 事 件 绑 定 的 主要 作用 在 于 降低 学 习 
和 开发 的 成 本 ， 笔 者 总 结 了 以 下 两 点 : 

@ 解决 了 不 同 浏览 器 之 间 的 兼容 问题 ; 

@ 提供 了 语法 糖 一 一 事件 绑 定 修饰 符 。 
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Mople 5—320pr 


3.7 获取 event 对 象 


3.3.2 ”常见 修饰 符 


有 过 JS 事件 代码 开发 经 验 的 同学 一 定 对 eventpreventDefault () (阻止 节点 默认 行为 ) 
和 event.stopPropagation 〈) (阻止 事件 冒 泡 ) 不 陌生 吧 ， 这 是 处 理 DOM 事件 时 很 常见 
的 方法 ，Vue 将 其 封装 成 简短 易 用 的 事件 修饰 符 ， 可 以 后 缀 于 事件 名 称 之 后 。 
常见 的 事件 修饰 符 如 表 3.1 所 示 。 


表 3.1 常见 的 事件 修饰 符 
名 称 可 用 版 本 | 可 用 事件 说 明 
当 事 件 触发 时 ， 阻 止 事件 冒 泡 
当 事 件 触发 时 ， 阻 止 元 素 默认 行为 
当 事 件 触发 时 ， 阻 止 事件 捕获 
限制 事件 仅 作 用 于 节点 自身 
事件 被 触发 一 次 后 即 解除 监听 
移动 端 ， 限 制 事 件 永 不 调用 preventDefault () 方法 


避 | 


-stop 


让 


融 | 没 | 部 | 融 


.prevent 


.capture 
.self 


京 | 京 


让 


-Once 


六 
站 


.passive 


下 面 ， 笔 者 将 演示 prevent 修饰 符 在 表单 提交 时 的 表现 ， 先 来 看 不 使 用 修饰 符 时 的 
情况 ， 代 码 如 下 : 


<div id="app"> 
<form @submit="handleSubmit"> 
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<h2> 不 使 用 修饰 符 时 </h2> 
<button type="submit"> 提 交 </button> 
</form> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
let vm = new Vuel({ 
el: '#app', 
data () { 
return { 
counter: 0 
} 
}, 
methods: { 
handlesubmit () { 
console.1og(`submit ${++this.counter} times `) 
} 
} 
从 
</script> 


笔者 多 次 点 击 “ 提 交 ” 按 钮 ,控制 台 均 是 一 闪 而 过 打印 信息 , 之 后 呈现 空白 , 如 图 3.8 
所 示 。 


1368"768™ 100%" RO! Bements Console Network » x 


9 © |top | Fite Default levels” SGrou| 


不 使 用 修饰 符 时 
| 提交 | 


3.8 不 使 用 修饰 符 时 


这 是 因为 当 未 指定 form 表单 的 action 时 ， 表 单 会 被 提交 到 当前 的 URL， 对 应 的 表现 
就 是 页 面 被 重新 加 载 。 
之 后 ， 笔 者 为 事件 添加 .prevent 修饰 符 ， 代 码 如 下 : 


<form @submit.prevent="handleSubmit"> 
<h2> 使 用 .prevent 修 饰 符 时 </h2> 
<button type="submit"> 提 交 </button> 
</form> 


运行 结果 如 图 3.9 所 示 〈 点 击 提交 后 ， 页 面 没 有 被 重 载 )。 
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使 用 .prevent 修 饰 符 时 
[| 


图 3.9 使 用 .prevent 修饰 符 时 


当 事 件 后 缀 多 个 修饰 符 时 ， 要 注意 修饰 符 的 排列 顺序 ， 相 应 的 代码 会 根据 排列 顺序 
依次 产生 。 比 如 ， 在 使 用 @click.prevent.self 时 ，Vue 先 执行 了 event.preventDefault () ， 
因此 会 阻止 元 素 上 的 所 有 点 击 事件 ， 而 在 使 用 @click.self.prevent 时 ， 由 于 先 为 事件 配置 
了 self 选 项， 所 以 只 会 阻止 对 元 素 自身 的 点 击 。 


3.3.3 ”按键 修饰 符 


对 于 键盘 事件 ，Vue 允许 将 按键 键 值 作为 修饰 符 来 使 用 ， 如 监听 回 车 键 〈 键 值 13) 
是 否 被 按 下 ， 可 以 这 么 写 : 


<input type="text" @keyup.13="console.1log ($event)"> 


此 外 ，Vue 还 为 一 些 常用 按键 配置 了 别名 ， 如 表 3.2 所 示 。 
表 3.2 常用 按键 修饰 符 别名 


别名 修饰 符 键 值 修饰 符 对 应 按键 
回 格 /删除 
Ey 


.13 
.27 
-32 
-37 


使 用 按键 别名 ， 我 们 无 须 记 住 按键 的 键 值 即 可 实现 对 特定 按键 的 监听 事件 ， 如 监听 
车 键 还 可 以 这 么 写 : 


<input type="text" keyup .enter="console.1og(S$event) "> 


回 
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当 回 车 键 被 按 下 时 ， 控 制 台 打印 的 信息 如 图 3.10 所 示 。 


ns 


一 一 > 别名 


3 
: KeyboardEvent 


3.10 回 车 键 事件 对 象 


实际 上 ， 大 部 分 按键 都 可 以 使 用 别名 ， 别 名 为 上 图 中 事件 对 象 的 属性 key 值 〈 不 区 
分 大 小 写 ) 。 
除了 键盘 按键 之 外 ，Vue 也 为 鼠标 按键 配置 了 修饰 符 ， 修 饰 符 如 表 3.3 所 示 。 


表 3.3 鼠标 按键 修饰 符 


2.2.0 以 上 
2.2.0 以 上 


这 里 ， 笔 者 不 再 多 作 笔墨 ， 感 兴趣 的 同学 可 以 亲自 实践 一 下 。 


3.3.4 组 合 修饰 符 


有 时 候 ， 我 们 需要 按 住 多 键 或 者 鼠标 与 键盘 共用 以 实现 某 些 操作 《〈 如 在 网 页 上 实现 
像 QQ 聊天 中 按 住 Ctrl + Enter 发 送 消息 的 功能 、 实 现 按 住 ctrl 后 使 用 鼠标 左 键 点 选 多 个 
文件 的 功能 等 ) ，Vue 为 此 提供 了 组 合 修饰 符 的 机 制 ， 不 过 其 必须 配合 系统 按键 修饰 符 
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方 可 生效 ， 修 饰 符 如 表 3.4 所 示 。 


表 3.4 ”系统 按钮 修饰 符 
可 用 版 本 
2.1.0 以 上 
2.1.0 以 上 


2.1.0 以 上 


下 面 来 看 一 段 示例 代码 : 
<div id="app"> 
<hl @click.ctrl="logWithctrl" eclick="1logsingle"> 没 有 ctr1 别 来 点 我 </h1> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
let vm = new Vue ({ 
el: '#app', 
methods: { 
logSingle (event) { 
if (!event.ctrlKey) { 
console.10g('------------— 分 割 线 ------------- 
console.log('$event.ctrlKey:', event.ctrlKey) 
console.1o0g(' 点 我 干 哈 ， 单 身 汪 ! ') 
} else { 
console.1og (' 不 错 ， 进 步 很 快 呀 ! ') 
} 


}, 

logWithCctrl (event) { 
DSS 人 (人 六 各 六 ') 
console.log('$event.ctrlKey:', event.ctrlKey) 
console.1og( ' 按 住 ， 是 的 ， 按 住 ctr1! ') 

} 

} 
}) 
</script> 


运行 结果 如 图 3.11 所 示 。 
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1368"768 x 100%” 


没有 ctrl 别 来 点 我 


按 住 trl! 
不 错 ， 进 步 很 快 呀 : 


3.11 使 用 组 合 修饰 符 


笔者 先 用 鼠标 点 击 节点 ， 此 时 事件 对 象 的 ctrlKey 值 为 false， 控 制 台 只 打印 了 鼠标 点 
击 事件 的 信息 ; 然后 按 住 Ctrl 键 再 次 点 击 节点 ， 此 时 事件 对 象 的 ctrlKey 值 为 tue， 控 制 
台 先 打印 了 鼠标 点 击 事件 的 信息 ， 之 后 打印 了 组 合 事件 的 信息 。 

通过 上 述 示例 ， 我 们 也 可 以 窥 得 使 用 JS 实现 组 合 按键 监听 的 些许 门 径 。 当 Ctrl 键 被 
按 下 时 ， 事 件 对 象 的 ctrlKey 值 被 设 为 tre; 当 鼠 标点 击 事件 触发 时 ， 如 果 ctrlKey 值 为 
true， 则 执行 组 合 事件 代码 。 

通过 事件 修饰 符 ，Vue 有 效 减少 了 用 户 原生 代码 的 书写 量 。 在 日 常 开发 中 ， 我 们 应 
该 合理 地 使 用 这 些 良好 的 模式 。 


3.4 双向 绑 定 


在 之 前 的 章节 中 ， 笔 者 简单 介绍 了 使 用 ObjectdefineProperty 实现 数据 绑 定 视图 的 基 
本 原理 。 不 过 ， 在 Vue 中 又 该 如 何 实现 “ 开 箱 即 用 ”这 种 机 制 呢 ? 


3.4.1 指令 v-model 


V-model 和 v-show 是 Vue 核心 功能 中 内 置 的 、 开 发 者 不 可 自 定义 的 指令 〈 言 外 之 意 
就 是 其 他 指令 都 可 被 开发 者 自 定 义 ， 这 部 分 内 容 将 会 在 之 后 的 章节 中 讲 到 ) 。 
我 们 可 以 使 用 v-model 为 可 输入 元 素 (input & textarea) 创建 双向 数据 绑 定 ， 它 会 根 
据 元 素 类 型 自动 选取 正确 的 方法 来 更 新 元 素 。 
笔者 先 演示 单行 文本 框 、 多 行文 本 框 、 单 选 框 和 复 选 框 的 绑 定 方法 ， 代 码 如 下 : 
<div id="app"> 
<h3> 单 行文 本 框 </h3> 
<input type="text" v-model="singleText" style="width: 240px;"> 


<p>{{ singleText }}</p> 
<h3> 多 行文 本 框 </h3> 
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<textarea v-model="multiText" style="width: 240px;"></textarea> 
<pre>{{ multiText }}</pre> 
<h3> 单 选 框 </h3> 
二 = 
Bm 由 于 点 击 被 选中 的 单 选项 无 法 取消 其 被 选中 状态 ， 所 以 实战 中 一 般 没有 使 用 单个 单 选项 的 
o 
这 里 ,设置 v-mode1 共 用 同一 个 变量 ( radioValue ) 可 实现 RadioGroup 的 效果 
--—> 
<input id="ra" type="radio" value=" 杨 玉环 " v-model="radioValue"> 
<label for="ra">A. 杨 玉环 </label> 
<input id="rb" type="radio" value=" 赵 飞 燕 " v-model="radioValue"> 
<label for="rb">B. 赵 飞 燕 </label> 
<p>{{ radioValue }}</p> 
<h3> 单 个 复 选 框 </h3> 
<!-- 单个 复 选 框 被 用 于 true 和 false 的 切换 --> 
<input id="c" type="checkbox" v-model="toggleValue"> 
<label for="c"> 天 生 丽 质 </label> 
<p>{{ toggleValue }}</p> 
<h3> 多 个 复 选 框 </h3> 
<!-- 多 个 复 选 框 ，v-model 接 收 数组 类 型 变量 --> 
<input id="ca" type="checkbox" value=" 漂 亮 " v-model="checkedValues"> 
<label for="ca">A. 回 眸 一 笑 百 媚 生 </label> 
<input id="cb" type="checkbox" value=" 瘦 弱 " v-model="checkedValues"> 
<label cb">B . 体 轻 能 为 学 上 和 舞 </1abel1> 
<input i c" type="checkbox" value=" 得 宠 " v-model="checkedValues"> 
<label for="cc">C. 三 干 宠爱 在 一 身 </1label> 
<p>{{ checkedValues.join(',') }}</p> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
let vm = new Vuel({ 
el: '#app', 
data () { 
return { 
singleText: '', 
Multieoxte 
radioValue: '', 
toggleValue: false, 
checkedValues: [] 


} 
}) 
</script> 


运行 结果 如 图 3.12 所 示 。 
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单行 文本 框 


试想 衣 要 花椒 安 ， 春 风 搁 术 可 从 


云 想 衣 党 花 塌 容 ， 春 风 指 窗 露 华 浓 。 
多 行文 本 框 


云 想 衣 车 花 想 容 ， 春 风 指 益 芳 华 浓 。 
着 丰 群 玉山 头 见 ， 会 向 王 台 月 下 进 。 


云 想 衣裳 花 想 罕 ， 春 风 指 档 露 华 浓 。 
着 非 群 玉山 头 见 ， 会 向 到 各 月 下 道 。 


单 选 框 

时 A 杨 玉环 日 B .起飞 本 
杨 玉环 

单个 复 选 框 

名 天 生 丽 质 


true 


多 个 复 选 框 

国 A 回 眸 一 壬 百 媚 生 目 B. 体 轻 能 为 掌上 舞 画 〔. 三 干 完 爱 在 一 身 
漂亮 得 宠 

3.12 ”使 用 v-model 实现 双向 数据 绑 定 (1) 


此 外 ， 下 拉 选 择 框 也 可 以 使 用 v-model 进行 双向 数据 绑 定 ， 代 码 如 下 : 


<div id="app"> 
<h3> 单 项 下 拉 选 择 框 </h3> 
<select v-model="singleSelect"> 
<!-- 如 果 没有 设置 value， 则 option 节 点 的 文本 值 会 被 当 作 value 值 --> 
<option value=" 汉 代 "> 汉 代 </option> 
<option> 唐 代 </option> 
</select> 
<p>{{ singlesSelect }}</p> 
<h3> 多 项 下 拉 选 择 框 </h3> 
<select multiple v-model="multiSelect"> 
<!-- 按 住 ctr1 键 ， 可 执行 多 选 --> 
<option value=1> 出 身 寒 微 </option> 
<option value=2> 饱 受 争 议 </option> 
<option :value="3"> 结 局 悲凉 </option> <!-- 想 一 想 , 为 什么 ? --> 
</select> 
<p>{{ multiSelect.join('，') }}</p> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
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let vm = new Vuel({ 
el: "'#app', 
data () { 
return { 
singleSelect: ' 唐 代 '， // 根据 value 设 置 默认 选择 项 
multiSelect: [1，3] 
} 
} 
}) 
<jhacript> 


运行 结果 如 图 3.13 所 示 。 


23 
3.13 ”使 用 v-model 实现 双向 数据 绑 定 (2 ) 


这 里 ， 笔 者 将 select 下 拉 选 择 框 擒 出 来 单独 讲述 ， 并 不 是 因为 它 具 有 何 种 妙用 ， 而 
是 因为 它 的 视图 表现 太 差 ， 而 当下 的 规范 尚 不 允许 开发 者 自 定义 option 的 样式 ， 所 以 在 
实战 中 一 般 都 会 使 用 其 他 元 素来 模拟 下 拉 选 择 框 ， 它 存在 的 意义 只 是 为 我 们 定义 组 件 时 
提供 一 个 参照 物 。 


3.4.2”v-model 与 修饰 符 


在 使 用 v-model 时 ， 我 们 还 可 以 为 其 后 级 一 些 修饰 符 以 丰富 用 户 输入 时 的 行为 ，Vue 
内 置 的 修饰 符 如 表 3.5 所 示 。 


表 3.5 可 用 于 v-model 的 修饰 符 


修 i 符 可 一 二 本 说 明 
将 用 户 输入 的 数据 赋值 于 变量 的 时 机 由 输入 时 延迟 到 数据 改变 时 


二 i 自动 转换 用 户 输入 为 数值 类 型 
自动 过 滤 用 户 输入 的 首尾 空白 字符 
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下 面 来 看 一 个 简单 示例 ， 代 码 如 下 : 


<div id="app"> 

<input type="text" v-model.trim.number="text" @keyup="handleKeyUp"> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 

let vm = new Vuel({ 


el: '#app', 
datas () => ({ tornts "™ Fs 
methods: { 


handleKeyUp () { 
console.log(this.text, typeof this.text) 
} 
} 
}) 
</script> 


笔者 为 v-model 绑 定 了 trim 和 number 修饰 符 , 并 在 输入 时 打印 出 输入 值 及 其 类 型 ( 输 
入 值 原始 类 型 为 String) ， 运 行 结果 如 图 3.14 所 示 。 
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图 3.14 ”使 用 v-model 的 修饰 符 


虽然 以 其 他 方式 也 能 实现 一 样 的 效果 ， 但 是 作为 一 个 优秀 的 框架 ，Vue 总 是 愿意 提 
供给 用 户 更 多 的 选择 。 我 们 在 开发 时 ， 也 应 该 针对 实际 场景 使 用 一 些 好 的 模式 和 方法 以 
降低 开发 的 复杂 度 。 


3.4.3”v-model 与 自 定义 组 件 


该 部 分 属于 进 阶 内 容 ， 如 果 你 对 组 件 开发 尚 不 了 解 的 话 ， 可 以 暂时 跳 过 这 里 ， 待 看 
完 组 件 相关 知识 后 ， 再 回 过 头 来 阅读 这 部 分 的 内 容 。 

不 只 原生 的 输入 元 素 可 以 使 用 v-model 进行 双向 数据 绑 定 ，Vue 甚至 允许 开发 者 将 
v-model 用 于 自 定义 组 件 ， 示 例 代 码 如 下 : 


<div id="app"> 
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<!-- 自 定义 组 件 v-model --> 
<custom-screen v-model="text"></custom-screen> 
<br> 
<!-- 原生 元 素 v-model --> 
<input type="text" v-model="text"> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
Vue .component ('custom-screen', { 
// 使 用 value 属 性 接收 外 部 传 入 的 值 
props: ['value'], 
methods: { 
handleReset () { 
console .10g (' 重 置 为 \'\'') 
this.$emit('input',，'') // 使 用 $emit 发 送 input 事 件 ， 并 将 目标 值 作为 参数 
传 出 
站 
] 
template: 
<div> 
<h2> 输 入 值 为 : {{ value }}</h2> 
<button Qclick="handleReset"> 重 置 为 空 </button> 
</div> 


}) 
let vm = new Vuel({ 
el: "#app"s 
data: () => ({ text: '' }) 
}) 
</script> 


示例 代码 的 初始 视图 ， 如 图 3.15 所 示 。 
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加 © | top "Ff 


Default lev 


3.15 v-model 与 自 定义 组 件 (1) 


当 笔 者 在 输入 框 中 输入 内 容 时 ， 视 图 如 图 3.16 所 示 。 
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1368"768™ x 768 i 民 加 | Console > 3 x 
四 @ |top ™ Fite Defaultlev 


输入 值 为 : Hello World 
| 重 雪 为 空 | 


Hello World| | 


图 3.16 v-model 与 自 定义 组 件 (2) 


之 后 点 击 “ 重 置 为 空 ”按钮 时 ， 视 图 如 图 3.17 所 示 。 


1368"768™ x 768 i 友和 | Console > 本 


加 © itop ™ Flte Defaultlev 
重 置 为 index .htm]:21 
输入 值 为 : 
重 寺 为 宝 


3.17 v-model 与 自 定义 组 件 ( 3 ) 


在 自 定义 组 件 中 ，value 属性 和 input 事件 尤为 重要 ， 它 们 分 别 负责 不 同方 向 的 数据 
传递 。value 属性 用 于 接收 外 部 传 入 的 值 以 更 新 组 件 内 部 的 状态 ，input 事件 由 开发 者 决 


定 在 什么 时 候 调用 ， 并 负责 将 组 件 内 部 的 状态 同步 到 外 部 。 


3.5 ”条 件 演 染 和 列表 演 染 


程序 中 有 三 大 结构 : 顺序 结构 、 分 支 结构 、 循 环 机 构 。 顺 序 结构 不 必 多 说 ， 分 支 和 
循环 结构 则 分 别 由 条 件 判 断 语 句 和 循环 语句 实现 。 同 样 地 ，Vue 也 为 视图 泻 染 提供 了 条 


件 判断 和 循环 的 机 制 ， 简 称 为 条 件 泻 染 和 列表 演 染 。 


3.5.1 指令 v-f 和 v-show 


V- 让 的 使 用 方法 并 不 复杂 ,只 需要 为 元 素 挂 上 v- 让 指令 即 可 , 与 之 配套 的 还 有 v-else-if 
和 v-else， 不 过 它们 只 能 与 v- 站 配合 使 用 。 下 面 来 看 一 个 简单 示例 ， 代 码 如 下 : 


<div id="app"> 
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<h2 v-if="order === 0"> 站 在 前 排 的 v-if</h2> 
<h2 v-else-if="order === 1"> 不 上 不 下 的 v-else-if</h2> 
<h2 v-else> 负 责 热 后 的 v-else</h2> 
<button @click="toggleTitle"> 切 换 标题 </button> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
let vm = new Vuel({ 
el: '#app', 
data () { 
return { 
orders 0 
} 
}, 
methods: { 
toggleTitle () { 
this.order = ++this.order % 3 
console .10g ('order 的 值 为 : '，this.order) 
} 
} 
}) 
</script> 


在 这 个 示例 中 ， 笔 者 设置 了 多 个 h2 元 素 ， 当 order 值 被 修改 时 ， 视 图 将 泻 染 满足 条 
件 的 元 素 ， 运 行 结果 如 图 3.18 所 示 。 


1368"768™ 100% 及 可。 Eements 
9 © top 
order 的 值 为 : 1 
order 的 值 为 : 2 


负责 垫 后 的 v-else 


L 切 污 标 归 | 
图 3.18 v-if 的 基本 用 法 


V-show 也 可 以 用 于 实现 条 件 泻 染 ， 不 过 它 只 是 简单 地 切换 元 素 的 CSS 属性 : 
display。 当 条 件 判 定 为 假 时 ， 元 素 的 display 属性 将 被 赋值 为 none; 反之 ， 元 素 的 display 
属性 将 被 恢复 为 原 有 值 。 

相对 于 v- 让 来 说 ，v-show 并 不 能 算 作 真正 的 条 件 泻 染 ， 因 为 挂 载 它 的 多 个 元 素 之 间 
并 没有 条 件 上 下 文 关系 ， 我 们 可 以 从 下 面 的 一 段 代码 中 体会 一 下 : 


<div id="app"> 
<h2 v-show="visible">v-show, visible = true</h2> 
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<h2 v-show="!visible">v-show, visible = false</h2> 
<h2 v-if="visible">v-if, visible = true</h2> 
<h2 v-else>v-if, visible = false</h2> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
let vm = new Vuel({ 
el: '#app', 
data () { 
return { 
visible: false 
} 
} 
}) 
</script> 


运行 结果 如 图 3.19 所 示 。 


1368"768" x 100%” { DD| Eements Console Network Sources » 证， 


Vv-show, visible = false 和 one ov- 
= fal5etjh2y ， 


V-if, visible = false nisl nom/vue@2,5 ,16/dist, 


3.19 v-show 和 v-if 的 对 比 


从 图 3.19 中 可 以 看 到 ，v-show 判定 为 假 的 元 素 的 display 属性 被 赋值 为 none， 不 过 
仍 保留 在 DOM 中 ， 而 v- 站 判定 为 假 的 元 素 则 根本 没有 在 DOM 中 出 现 。 

最 后 ， 笔 者 罗列 了 以 下 几 个 注意 点 。 

@ Vv- 直 会 在 切换 中 将 组 件 上 的 事件 监听 器 和 子 组 件 销毁 和 重建 。 当 组 件 被 销毁 时 ， 
它 将 无 法 被 任何 方式 获取 ， 因 为 它 已 不 存在 于 DOM 中 。 

@ 在 创建 父 组 件 时 ， 如 果子 组 件 的 V- 寺 被 判定 为 假 ，Vue 不 会 对 子 组 件 做 任何 事情 ， 
直到 第 一 次 判定 为 真 时 。 这 在 使 用 Vue 生命 周期 钩子 函数 时 要 尤为 注意 ， 如 果 生 
命 周期 已 走 过 组 件 创 建 的 阶段 , 却 仍 无 法 获取 组 件 对 象 , 想 一 想 , 是 不 是 v- 让 在 作怪 。 

@ V-show 有 更 高 的 初始 泻 染 开销 ， 而 v- 寺 有 更 高 的 切换 开销 ， 这 与 它们 的 实现 机 制 
有 关 ， 在 使 用 时 要 多 加 考虑 具体 的 应 用 场景 。 

@ Vv-show 不 支持 template 元 素 ， 不 过 在 Vue 2.0 中 ，template 的 应 用 并 不 广泛 ， 了 
解 即 可 。 
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3.5.2 指令 v-for 


v-for 用 于 实现 列表 演 染 , 可 以 使 用 item in items 或 者 item of items 的 语法 , 代码 如 下 : 


<div id="app"> 
<div style="float: left; width: 160px;"> 
<h2> 用 户 列表 </h2> 
<ul> 
<!-- index 作 为 第 二 个 参数 ， 用 以 标识 下 标 --> 
<1i v-for="(item, index) in users">{{ index }}.ég&nbsp;{{ item.name 
站 区 多 是 


</ul> 

</div> 

<div style="margin-left: 170px;overflow: hidden"> <!-- BFC --> 
<h2> 用 户 列 表 </h2> 
<ul> 


<!-- uIndex 作 为 第 二 个 参数 ， 用 以 标识 下 标 --> 
<1i v-for="(user, uIndex) of users">{{ uIndex }}.&nbsp;{{ user. 
name }}</1i> 
</ul> 
</div> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
let vm = new Vuel({ 
el: '#app', 
data () { 
return { 
WSerss ({ 
{ 
name: 'Clark', 
age: 27, 
city: 'Chicago' 
}, 


name: "Jackson'y 
age: 28, 
city: "Sydney'" 

} 


i 
} 
</script> 


示例 运行 结果 如 图 3.20 所 示 。 
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用 户 列表 用 户 列表 


e 0. Clark » 0. Clark 
。 1.Jackson e。 1.Jackson 


图 3.20 v-for 的 基本 用 法 


除了 渲染 数组 之 外 ，v-for 还 可 以 泻 染 一 个 对 象 的 键 值 对 ， 笔 者 对 上 述 示例 中 的 
HTML 代码 稍 作 修改 ， 得 到 的 代码 如 下 : 
<div id="app"> 
<h2> 用 户 列表 </h2> 
<ul> 
<!-- index 作 为 第 二 个 参数 ， 用 以 标识 下 标 --> 
<1i v-for=" (user, index) in users"> 
用 户 {{ index + 1 }} 
<ul> 
<!-- key 作 为 第 二 个 参数 ， 用 以 标识 键 名 --> 
<1i v-for=" (value, key) of user">{{ key }}:&gnbsp;{{ value }}</1i> 


</ul> 
ALE 
</ul> 
</div> 
5 可 
运行 结果 如 图 3.21 所 示 。 
用 户 列表 
。 用 户 1 
o name: Clark 
0 age: 27 
o city: Chicago 
。 用户 2 
o name: Jackson 
oage: 28 
o city Sydney 


图 3.21 使 用 v-for 演 染 对 象 的 键 值 对 


Vue 会 把 数组 当 作 被 观察 者 加 入 响应 式 系统 中 ， 当 调用 一 些 方法 修改 数组 时 ， 对 应 
的 视图 将 会 同步 更 新 ， 笔 者 将 这 些 方法 罗列 了 出 来 ， 如 表 3.6 所 示 。 


表 3.6 与 数据 响应 有 关 的 数组 方法 
说 明 


将 一 个 或 多 个 元 素 添加 至 数组 末尾 ， 并 返回 新 数组 的 长 度 
pop 从 数组 中 删除 并 返回 最 后 一 个 元 素 
shift | 从 数组 中 删除 并 返回 第 一 个 元 素 
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续 表 


[将 一 个 或 多 个 元 素 添加 至 数组 开头 ， 并 返回 新 数组 的 长 度 


| 从 数组 中 删除 元 素 或 向 数组 添加 元 素 
[对 数组 元 素 排序 ， 默 认 按照 Unicode 编码 排序 ， 返 回 排序 后 的 数组 
将 数组 中 的 元 素 位 置 颠 倒 ， 返 回 颠倒 后 的 数组 


下 面 是 一 个 用 到 了 push () 和 reverse () 方法 的 示例 ， 代 码 如 下 : 


<div id="app"> 
<h2> 用 户 列 表 </h2> 
<button @click="createUser"> 创 建 用 户 </button> 
<button @click="reverse"> 倒 序数 组 </button> 
<ul> 
<!-- index 作 为 第 二 个 参数 ， 用 以 标识 下 标 --> 
<1i v-for=" (user，jindex) in users"> 
用 户 {{ index + 1 }} 
<ul> 
<!-- key 作 为 第 二 个 参数 ， 用 以 标识 键 名 --> 
<1i v-for="(value, key) of user"> 
<strong style="display: inline-block;width: 60px;">{{ key }}:</ 
strong> 
<span>{{ value }}</span> 
</1i> 
</ul> 
</1i> 
</ul> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
1s"></script> 
<script type="text/javascript"> 
let vm = new Vuel({ 
el: '#app', 
data () { 
return { 
users: [] 
} 
}, 
methods: { 
random (factor，base) { // 根据 乘积 因子 和 基数 生成 随机 整数 
return Math.floor (Math.random() * (factor || 1)) + (base || 0) 
jy 
createUser (} { 
// 获取 name 大 写 首 字 母 
let fLetter = 'BJHK' [this.random(3.999)] 
// 随机 截取 name 字符 串 
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let nameStr = 'abcdefghijklmnopqrstuvwxyz" 
let bLetters = nameStr.substr (this.random(19.999), this.random(3.999, 3)) 
let user = { 
name: fLetter + bLetters, 
age: this.random(5.999, 25), 
city: ['Chicago', 'Sydney', 'ShenZzhen', 'Hangzhou'] [this.random 
3.999}1 
} 
console.1og('--------------- 创建 用 户 --------------- \n', user) 
this.users.push (user) 
}, 
reverse () { 
console.1og('--------------- 倒序 列表 --------------- 对 
console.1og('Before:'，this.users.map (user => User.name) ) 
this .users .reverse() 
console.log('After:', this.users.map(user => User.name) ) 
} 
} 
拉 
</script> 


示例 初始 视图 如 图 3.22 所 示 。 


T36875a" Tv 车 


用 户 列表 


ee as] 
3.22  v-for 泻 染 被 观察 的 数组 ( 1 ) 


笔者 连续 点 击 “ 创 建 用 户 ”按钮 三 次 之 后 ， 视 图 如 图 3.23 所 示 。 


53"768* ooxr 
用 户 列表 
[a 有 P | 5 
。 用户 1 
o name: Brstuvw 
oage: 29 
9 city: Sydney 
。 用 P2 
o name: High 
oage: 30 
ae city: Chicago 
。 用户 3 
o name: Jhijkim 
oage: 30 


o city: Chicago 


3.23 ”Vv-for 泻 染 被 观察 的 数组 ( 2 ) 
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笔者 点 击 “ 倒 序数 组 ”按钮 之 后 ， 视 图 如 图 3.24 所 示 。 


1368768 135: x 765 100%” 


用 户 列表 


[eR | [人 


。 用 户 1 

o name: Jhijkim 
age: 30 
city; Chicego 


name: Hfgh 
oage: 30 
e city: Chicago 


name: Brstuvw 
oage: 29 
ecity Sydney 


图 3.24 v-for 演 染 被 观察 的 数组 ( 3 ) 


要 注意 的 是 ， 直 接 使 用 下 标 / 键 名 为 数组 /对 象 设置 成 员 时 ， 有 以 下 用 法 : 


arr[0] = 99 // 使 用 索引 为 数组 设置 成 员 
obj['key'] = 'value'  // 使 用 键 名 为 对 象 设置 成 员 


Vue 并 不 会 将 其 加 入 数据 响应 式 系 统 ， 因 此 当 数 据 被 修改 时 ， 视 图 不 会 进行 更 新 。 
3.5.3 ”列表 泻 染 中 的 key 


在 使 用 v-for 时 ， 最 好 为 每 个 迭代 元 素 提 供 一 个 值 不 重复 的 key。 
当 列表 泻 染 被 重新 执行 〈 数 组 内 容 发 生 改变 ) 时 ， 如 果 不 使 用 key，Vue 会 为 数组 成 
员 就 近 复 用 已 存在 的 DOM 节点 ， 如 图 3.25 所 示 。 


不 使 用 key 时 ， 就 近 复 用 


数组 成 员 3 DOM 节 点 3 | 数组 成 员 2 | 一 一 | DOM 节 点 3 


3.25 不 使 用 key 时 的 列表 泻 染 


当 使 用 key 时 ，Vue 会 根据 key 的 变化 重新 排列 节点 顺序 ， 如 图 3.26 所 示 ， 并 将 移 
除 key 不 存在 的 节点 。 
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使 用 key 时 ， 身 份 追 踪 


图 3.26 使 用 key 时 的 列表 泻 染 


实质 上 ，key 的 存在 是 为 DOM 节点 标注 了 一 个 身份 信息 ， 让 Vue 能 够 有 迹 可 循 追踪 
到 数据 对 应 的 节点 。 在 实战 开发 中 ， 是 否 使 用 key 都 不 会 影响 功能 的 实现 ， 不 过 在 Vue 
2.2.0+ 的 版 本 中 ， 使 用 v-for 时 没有 附加 key 的 话 ，Vue 会 给 出 一 个 警告 。 


第 4 章 Vue 选项 


在 之 前 的 章节 中 ， 我 们 见 过 一 些 Vue 实例 的 选项 ， 通 过 这 些 选 项 ， 我 们 可 以 为 
实例 绑 定 数据 和 事件 以 丰富 其 状态 和 功能 。 那 么 ，Vue 有 哪些 选项 可 供 使 用 呢 ? 
下 面 ， 笔 者 将 介绍 一 些 常见 选项 的 用 法 。 


4.1 数据 和 方法 


数据 和 方法 类 型 的 选项 是 Vue 实例 选项 中 最 重要 的 内 容 ， 用 好 这 些 足 以 支持 开发 者 
创建 一 个 完整 的 Vue 应 用 。 


4.1.1 数据 选项 


数据 〈data) 选项 可 接受 的 类 型 有 对 象 和 函数 两 种 ， 不 过 在 定义 一 个 组 件 时 只 能 使 
用 函数 类 型 ， 示 例 代 码 如 下 : 


<div id="app"> 
<hl>{{ title }}</hl> 
<button-counter></button-counter> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
Vue .component ('button-counter'，{ // 创建 一 个 Vue 组 件 
data () { // 必须 使 用 函数 类 型 
return 1{ 
counter: 1 
} 
}, 
template: '<button @click="countert++">clicked {{ counter }} times</ 
button>"' 
}) 
// let vm = new Vuel({ 
x el: '#app', // mount 到 DOM 上 
a data: { // 对 象 类 型 
// title: 'A Vue App’' 
; } 
2 对 
let vm = new Vuel({ 
el: '#app', // mount 到 DOM 上 
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data() { // 函数 类 型 
return { 
title: 'A Vue App' 
} 
} 
}) 
</script> 


在 Vue 中 声明 组 件 时 ， 如 果 使 用 了 对 象 类 型 的 data 选项 ， 模 板 将 找 不 到 在 data 中 被 
声明 的 数据 。 如 果 使 用 了 支持 Vue 模板 的 语法 检查 器 ， 开 发 者 将 得 到 错误 提示 “data 
property in component must be a function”。 

Vue 会 递归 地 将 data 选项 中 的 数据 加 入 响应 式 系统 ， 但 这 些 数据 应 该 是 声明 时 即 存 
在 的 。 下 面 来 看 一 段 示 例 代码 〈 单 文件 组 件 模板 ) : 


<template> 
<div> 
<h2>{{ title }}</h2> 
<p>{{ profile }}</p> 
</div> 
</template> 


<script> 
export default { 
name: 'Instance', 
data () { 
return { 
title: 'A Vue App' 
} 


}, 
created () { 
Object.assign (this.$data，1{ // 为 对 象 赋值 属性 ， 没 有 则 添加 属性 ， 有 则 
覆盖 原 有 属性 值 
profile: 'This is a Vue App' 
8 
console.1log (this.s$data) 
} 
} 
</script> 


运行 结果 如 图 4.1 所 示 。 
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A Vue App 


图 4.1 非 声明 时 添加 的 数据 


图 4.1 中 的 tite 是 笔者 在 初始 化 实例 时 声明 在 data 选项 中 的 数据 ， 而 profile 则 是 在 
created 钩子 函数 中 被 赋予 data 选项 的 。 可 以 看 到 ，profile 被 赋予 data 选项 之 后 ， 视 图 没 
有 发 生 任何 变化 ， 这 是 因为 Vue 在 处 理 数据 时 ， 并 未 把 profile 加 入 数据 响应 式 系统 。 又 
因为 profile 是 在 实例 创建 完成 后 〈created) 被 绑 定 到 组 件 上 的 ， 所 以 Vue 给 出 了 错误 提 
示 “profile is not defined”。 此 时 的 profile 只 是 一 个 普通 的 JS 属性 ， 而 非 被 Vue 观 
察 的 对 象 。 


在 实际 开发 时 ， 应 将 可 能 在 实例 中 被 观察 的 对 象 预先 在 data 选 项 中 声明 ， 以 任何 浏览 器 所 支持 
的 原生 API 都 无 法 将 数据 动态 加 入 响应 式 系统 ， 不 过 Vue 针 对 这 一 需求 ， 也 提供 了 相应 的 机 制 。 


开发 者 可 以 使 用 $set 方法 为 data 选项 动态 绑 定数 据 ， 但 其 也 无 法 挂 载 响应 式 数 据 到 
$data 根 节点 上 。 不 过 ， 既 然 这 些 数据 (尽管 你 可 能 用 不 到 ) 要 绑 定 到 $data 根 节点 上 ， 


何不 在 初始 化 时 声明 呢 ? 
$set 用 法 如 下 : 
/** 
* target 目标 对 象 Object | Array 
* key 键 名 string | Number 
* value ” 键 值 任意 类 型 
本 放 
// Vue.set (target, key, value) 
created () { 


this.$set (target, key, value) 
} 


下 面 ， 笔 者 将 分 别 演示 使 用 原生 方法 Object.assign 和 Vue.$set 为 组 件 挂 载 响应 式 数 
据 的 示例 。 关 于 Object.assign 的 代码 如 下 : 


<template> 
<div> 
<h2>{{ title }}</h2> 
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<p>{{ obj.profile }}</p> 
<button @click="toggle">toggle</button> 
</div> 
</template> 


<script> 
export default { 
name: "Instance'， 
data () { 
return { 
title: 'A Vue App', 
obj: {} // $set 不 能 用 于 根 节点 data 上 
} 
}, 
created () { 
Object .assign (this.obj, { 
profile: 'This is a Vue App.' 
}) 
console.1log('created', this.obj) 
}, 
mounted () { 
Object.assign (this.obj, { 
profile: 'This is a Vue Test App.' 
}) 
console.1log('mounted', this.obj) 
}, 
methods: { 
toggle () { 
Object.assign (this.obj, { 
profile: 'This is a Vue App for test.' 
}) 
console.1log('toggle', this.obj) 
} 
} 
} 
< acript> 


运行 结果 如 图 4.2 所 示 。 
相 比 于 之 前 使 用 Object.assign 的 示例 ， 这 次 的 视图 表现 更 显 奇怪 ，Vue 不 仅 没有 给 
出 错误 提示 ， 还 响应 了 在 created 钩子 函数 中 所 做 的 修改 ， 为 什么 呢 ? 笔者 从 生命 周期 的 
角度 来 分 析 一 下 。 
@ 在 组 件 实例 被 创建 (beforeCreate 和 created 之 间 ) 时 ,obj 对 象 作为 data 选项 的 属性 ， 
存在 于 实例 中 且 拥 有 合法 的 地 址 。 
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AVue App 
This Is a Vue App. 


‘toggle 


:Object 


图 4.2 使 用 Object.assign 绑 定 属性 到 对 象 中 


@ 在 created 钩子 函数 中 ， 笔 者 将 profile 挂 载 到 obj 对 象 上 ，obj.profile 由 undefined 
变 为 被 赋予 的 值 。 由 于 obj.profile 被 赋值 时 ， 实 例 已 经 过 了 将 数据 加 入 响应 式 
系统 的 阶段 ， 所 以 obj.profile 并 未 被 观察 。 又 因为 实例 尚未 和 DOM 节点 绑 定 

( beforeMount ) ， 所 以 此 时 修改 profile 依然 可 以 影响 之 后 的 视图 表现 ( profile 的 
视图 表现 是 在 实例 created 时 被 赋予 的 ) 。 

@ 在 mounted 钩子 函数 和 click 事件 中 ， 由 于 实例 已 经 绑 定 到 DOM 节点 上 且 profile 
不 存在 于 响应 式 系统 中 ， 所 以 此 时 修改 profile， 视 图 没有 发 生变 化 。 

笔者 将 示例 代码 稍 作 修改 ， 在 created 中 以 $set 的 方式 为 对 象 绑 定 属性 ， 代 码 如 下 : 


created () { 
this.$set (this.obj, 'profile', 'This is a Vue App.') 
console.1log('created', this.obj) 

}, 


运行 结果 如 图 4.3 所 示 。 
BD Hoverts Cowole We Netwak So 
加 © wp FR Defou 
PR] Voiting For undate sigrel 和 
ws 
A Vue App 
Ltogge 


4.3 使 用 $set 绑 定 属性 到 对 象 中 
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此 时 的 profile 被 加 入 Vue 的 响应 式 系统 ， 当 笔者 点 击 按钮 时 ， 视 图 也 发 生 了 变化 。 
最 后 还 要 注意 的 一 点 是 ， 慎 重地 将 已 有 内 存 地 址 的 对 象 用 于 data 选项 ， 无 论 以 对 象 
还 是 函数 形式 ， 比 如 以 下 用 法 : 
<div id="app"> 
<button-counter></button-counter> // 调用 两 次 组 件 
<button-counter></button-counter> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
let jack = { 
counter: 0 
} 
Vue .component ('button-counter', { 
data () { // 函数 类 型 
return jack 
}, 
template: '<button @click="counter++">click {{counter}} times</ 
button>" 
}) 
let vm = new Vuel({ 
el: '#app' // mount 到 DOM 上 
}) 
</script> 


运行 结果 如 图 4.4 所 示 。 


click 3 times || click 3 times 


ec 


4.4” 错 用 已 声明 对 象 作为 data 值 


由 于 button-counter 组 件 在 声明 时 ，jack 对 象 被 用 作 data 选项 的 根 节点 ， 所 有 实例 将 
共享 jack 对 象 占用 的 地 址 。 因 此 ， 当 修改 一 个 实例 的 数据 时 ， 所 有 实例 的 数据 都 将 同步 
更 新 。 如 图 4.4， 笔 者 只 点 击 了 第 一 个 按钮 三 次 ， 而 两 个 按钮 的 视图 都 发 生 了 变化 。 我 们 
应 该 怎么 处 理 这 个 问题 呢 ? 

笔者 建议 在 声明 时 , 不 要 将 已 有 内 存 地 址 的 对 象 用 于 data 选 项 , 我 们 应 该 创建 新 对 象 ， 
示例 代码 如 下 : 


Vue .component ('button-counter', { 
data () { // 函数 类 型 
return { // 创建 一 个 新 对 象 
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Counter: 0 
} 
} 


7 
template: '<button click="counter++">click {{counter}} times</ 
button>"' 


}) 


或 者 使 用 JSON.parse (JSON.stringify (obj) ) 深 找 贝 已 上 有 对象 ， 代 码 如 下 : 
let jack = { 

counter: 0 
} 
Vue .component ('button-counter', { 

data () { 

return JSON.parse (JSON.stringify(jack)) // 深 拷贝 

}, 

template: '<button @click="++counter && (console.log(\'click\'))">click 
{{counter}} times</button>'" 
}) 


上 述 代码 的 运行 结果 如 图 4.5 所 示 。 


Lelick 0 times 


4.5 正确 赋值 data 选项 


无 论 使 用 哪 种 方式 ， 目 的 都 是 为 实例 的 data 选项 分 配 一 个 新 的 内 存 地 址 。 
4.1.2 属性 选项 


对 于 开发 者 来 说 ， 代 码 的 可 复 用 性 十 分 重要 。 在 某 些 场景 中 ， 虽 然 业务 的 大 部 分 特 
性 都 是 一 致 的 ， 但 往往 会 有 部 分 差异 使 得 代码 复 用 变 得 十 分 困难 。 

Vue 为 组 件 开发 提供 了 属性 props) 选项 ， 我 们 可 以 使 用 它 为 组 件 注册 动态 特性 ， 
以 处 理 业务 间 的 差异 ， 使 代码 可 以 复 用 于 相似 的 应 用 场景 。 

props 选项 可 以 是 数组 或 者 对 象 类 型 ， 用 于 接收 从 父 组 件 传递 过 来 的 参数 ， 并 允许 开 
发 者 为 其 设置 默认 值 、 类 型 检测 和 校 验 规则 等 。 示 例 代码 如 下 : 

<div id="app"> 


<color-text text="Hello World"></color-text> 
<br> 


<color-text></color-text> 
oo 
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<color-text color="#f78" text="Hello World"></color-text> 
<br> 
<color-text color="#43dt" text="Hello World"></color-text> 
<br> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
Vue .component ('color-text', { 
props: { 
text: String, 
COLoOrs. { 
type: String, 
default: '#000',， // 默认 值 黑色 
required: true, 
validator (value) { // 校 验 规则 ， 判 断 颜 色 值 是 否 合法 
return /^#([0-9a-fR-E]{16}1[0-9a-fR-F]{13}1)S/.test(value) 
} 
} 
}, 
template: '<span :style="{ color: color}">{{ text }}</span>' 


let vm = new Vuel({ 
el: '#app"' 


< ceript> 


在 上 述 代码 中 ， 笔 者 为 自 定义 组 件 color-text 声明 了 color 和 text 两 个 动态 属性 ， 并 
为 color 设置 了 默认 值 黑色 〈#000) 和 校 验 规则 ， 为 两 者 设置 了 类 型 检测 。 
示例 的 运行 结果 如 图 4.6 所 示 。 


span style= color: rgb(9，9，9)j7>Hello Worldec/5pan' 
Hello World 
span styler color: rgb(9, 8, 0);*>¢/span: 
Hello World eh 
Hello World span style="color; reb(255, 119, 136);">Hello World</span 
br 


span?Hello Worldc/span 


Src=rhttosi/1cdn,jsdelivr .net/nom/vue82.5,16/dist, 
js"yt/script 


yue 


图 4.6 使 用 props 定义 组 件 特 性 


在 第 一 个 组 件 实例 中 ， 笔 者 没有 传 入 color 值 ， 因 此 实例 采用 默认 值 #000; 第 二 个 
实例 没有 text 值 ， 因 此 文本 显示 为 空 ， 第 三 个 实例 使 用 了 合法 的 color 和 text， 显 示 正 常 ; 
第 四 个 实例 中 ， 笔 者 传 入 了 非法 的 color 值 ， 规 则 校 验 失败 ， 因 此 没有 被 绑 定 到 DOM 节 
点 上 。 
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4.1.3 ”方法 选项 


先 来 看 两 个 示例 ， 代 码 如 下 : 


// 代码 1 
let storel = { 
msg: "Hello World', 
logMsg; function () { 
console.10g('---—---—-—---—-— 匿名 函数 ------------ \n', this) 
console.1og (this.msg) 
+ 
} 
storel .logMsg() 
// 代码 2 
let store2 = { 
msg: 'Hello World', 
logMsg: () => { 
console.10g('-——----—-—--—— 箭头 函数 ------------ \n', this) 
console.1log (this.msg) 
} 
} 
store2.1ogMsg() 


上 面 这 两 段 代 码 将 打印 什么 内 容 呢 ? 
结果 如 图 4.7 所 示 。 


------------ 匿名 函数 ------------ 
» {msg: “HeLLo WorLd”, LogMsg: f} 
Hello World 


------------ 箭头 函数 ------------ 


undefined 


4.7 函数 作用 域 


使 用 箭头 函数 定义 方法 时 并 不 会 创建 函数 作用 域 , 因此 this 也 不 会 指向 其 父 级 实例 ， 
此 时 的 this 会 向 上 追踪 。 当 找到 某 个 函数 作用 域 时 ，this 将 指向 该 函数 的 父 级 实例 ， 和 否则 ， 
this 将 指向 浏览 器 的 内 置 对 象 Windows。 
笔者 准备 了 一 道 选择 题 ， 代 码 如 下 : 
let store = { 
msg: "学 习 已 经 很 可 怜 了 ' ， 
logMsg () { 
let store = { 
msg: ' 你 能 不 能 长 点 心 '， 
logMsg:, () => { 
let store = { 
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msg: ' 给 人 多 留 点 时 间 吧 '， 
logMsg: () => { 
console.1log (this.msg) 
} 
} 
store.1logMsg() 
} 
} 
store.1logMsg() 
} 
} 
store.1logMsg () 


这 段 代 码 将 打印 什么 呢 ? 同学 们 思考 一 下 吧 。 

关于 methods 选项 ， 笔 者 没有 太 多 要 说 的 ， 唯 一 的 一 点 就 是 不 要 用 箭头 函数 在 其 中 
定义 方法 。 在 创建 组 件 时 ，methods 中 的 方法 将 被 绑 定 到 Vue 实例 上 ， 方 法 中 的 this 也 
将 自动 指向 Vue 实例 。 此 时 ， 如 果 使 用 箭头 函数 的 话 ，this 将 无 法 正确 指向 Vue 实例 ， 
这 会 带 来 不 必要 的 麻烦 。 


4.1.4 计算 属性 


计算 属性 〈computed 选项 ) 设计 的 初衷 在 于 减轻 模板 上 的 业务 负担 ， 当 数据 链 上 出 
现 复杂 衍生 数据 时 ， 我 们 更 期 望 以 一 种 易 维护 的 方式 去 使 用 它 。 
在 下 面 的 示例 中 ， 笔 者 展示 了 没有 使 用 computed 时 的 场景 ， 代 码 如 下 : 


<div id="app" style="font-family: Roboto, sans-serif; color: rgb(84, 
92, 100);margin-left: 100px;"> 

<h2> 英 语 中 的 " 互 文 "</h2> 

<p> 我 们 先 来 看 三 句 话 ( 代码 ) :</p> 

<p>{{ message }}.&nbsp; &nbsp; 我 看 到 的 是 车 还 是 猫 。</p> 

<p>{{ message.replace(/\s/g, '') }}</p> 

<p>{{ message.replace(/\s/g, '').split('').reverse().join('') }}</ 
p> 

<p> 英 语 中 也 有 " 互 文 "的 修辞 手法 ， 比 如 {{ message }} 这 人 句 话 ，</p> 

<p> 将 句 中 空格 去 掉 可 得 {{ message.replace(/\s/g, '') }}, </p> 

<p> 将 句 中 空格 去 掉 并 将 其 倒序 可 得 {{ message.replace(/\s/g, '').split(''). 
reverse() .join('') }}o </p> 

<p> 可 以 看 到 ,1{{ message.replace(/\s/g, '') }} = {{ message.replace(/\ 
s/g, '').split('') .reverse() .join('') }}, </p> 

<p> 这 是 互 文英 语 的 一 个 示例 。</p> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
"></script> 
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<script type="text/javascript"> 
let vm = new Vuel({ 
el: '#app', 
data () { 
return { 
message: 'WAS IT A CAR OR A CAT I SAW' 
} 
} 
| 
</script> 


虽然 直接 在 模板 上 书写 业务 逻辑 也 可 以 实现 功能 需求 ， 但 是 这 么 做 不 仅 使 得 代码 结 
构 十 分 混乱 , 而 且 当 业务 逻辑 发 生变 化 时 , 开发 者 还 需要 对 所 有 逻辑 发 生 的 地 方 进 行 修改 ， 


十 分 不 易于 维护 。 
笔者 基于 computed 选项 重 构 示例 ， 代 码 如 下 : 


<div id="app" style="font-family: Roboto, sans-serif; color: rgb(84, 
92, 100);margin-left: 100px;"> 
<h2> 英 语 中 的 " 互 文 "</h2> 
<p> 我 们 先 来 看 三 句 话 ( 代码 ) :</p> 
<p>{{ message }}.&nbsp;&nbsp; 我 看 到 的 是 车 还 是 猫 。</p> 
<p>{{ noSpaceMsg }}</p> 
<p>{{ palindromeMsg }}</p> 
<p> 英 语 中 也 有 " 互 文 "的 修辞 手法 ， 比 如 {{ message }} 这 句 话 ，</p> 
<p> 将 句 中 空格 去 掉 可 得 {{ nospaceMsg }}，</p> 
<p> 将 句 中 空格 去 掉 并 将 其 倒序 可 得 {{ palindromeMsg }}。</p> 
<p> 可 以 看 到 ,1{{ noSpaceMsg }} = {{ palindromeMsg }}, </p> 
<p> 这 是 互 文英 语 的 一 个 示例 。</p> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"S</script> 
<script type="text/javascript"> 
let vm = new Vuel({ 
el: '#app', 
data () { 
return { 
message: 'WAS IT A CAR OR A CAT I SAW' 
$ 
}, 
computed: { 
nospaceMsg () { 
return this.message.replace(/\s/g, '') 
}, 
palindromeMsg () { 
return this.message.replace(/\s/g, '').split('').reverse(). 
join('') 
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}) 
</script> 


重 构 前 后 的 运行 结果 如 图 4.8 所 示 。 


英语 中 的 互 文 


先生 和 


4.8 衍生 数据 的 视图 表现 


是 否 使 用 computed 选项 对 视图 表现 并 无 影响 ， 但 使 用 了 computed 之 后 ， 组 件 的 代 
码 结构 明显 清晰 了 许多 ， 而 且 即 使 日 后 数据 的 处 理 方式 发 生 了 变化 ， 也 只 需 在 选项 中 修 
改 即 可 。 

与 methods 一 样 ，computed 不 能 以 箭头 函数 声明 ， 同 时 它 也 会 被 混入 Vue 实例 ， 并 
可 通过 this 调用 。 

由 于 计算 属性 依赖 于 响应 式 属性 ， 所 以 当 且 仅 当 响应 式 属性 变化 时 ， 计 算 属性 才 会 
被 重新 计算 ， 而 且 得 到 的 结果 将 会 被 缓存 ， 一 直到 响应 式 属性 再 次 被 修改 。 相 比 于 使 用 
methods 函数 求 值 ， 这 是 一 种 更 为 高 效 的 机 制 ， 如 图 4.9 所 示 。 


computed: { methods: { 
noSpaceMsg O{ getNoSpaceMsg 0{ 
return this.message.replace(/\s/g, *) return this.message.replace(/\s/g, ) 
】 } 
少 } 
mounted: { mounted:{ 
// 调用 三 次 , 只 计算 一 次 // 调用 三 次 , 计算 三 
console.log(this.noSpaceMsg) console.log(this.getNoSpaceMsg()) 
console.log(this.noSpaceMsg) consoleloglthis.getNoSpaceMsg0) 
console.log(this.noSpaceMsg) console.log(this. getNoSpaceMsg()) 


】 】 


图 4.9 与 methods 求 值 对 比 


最 后 一 点 ，Vue 也 允许 开发 者 为 computed 属性 赋值 。 


开发 者 有 权 定 义 可 被 赋值 的 computed 属性 ， 方 法 类 似 于 定义 对 象 属性 描述 符 中 的 
setter 和 getter， 示 例 代 码 如 下 : 
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<div id="app"> 
<h2> 数 据 变化 之 前 
<i style="color: #ababab;font-size: 14px;"> 
* 指令 v-once 可 以 限制 视图 不 再 响应 数据 变化 
/Es 
</h2> 
<p Vv-once>{{ message }11</p> 
<p v-once>{{ noSpaceMsg }}</p> 
<h2> 数 据 变化 之 后 </h2> 
<p>{{ message }}</p> 
<p>{{ noSpaceMsg }}</p> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
let vm = new Vuel({ 
el: '#app', 
data () { 
return { 
message: 'WAS IT A CAR OR A CAT I SAW' 
} 
: 
computed: { 
nospaceMsg: { 
set (value) { 
this.message = value 
}, 
get () { 
return this.message.replace(/\s/g, '') 
} 


} 
}) 


</script> 
笔者 在 控制 台中 修改 了 实例 的 message 值 ， 得 到 的 结果 如 图 4.10 所 示 。 
数据 变化 之 前 “so 
WAS IT A CAR OR A CATI SAW 
WASITACARORACATISAW 
数据 变化 之 后 


IT MAY BE A CAT 


ITMAYBEACAT 


4.10 可 被 赋值 的 computed 属性 
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虽然 这 种 方式 赋予 了 computed 更 多 的 职能 ， 但 笔者 并 不 推荐 这 么 做 ， 专 业 的 事 应 
交 给 专业 的 人 /工具 来 做 。 同 时 ，Vue 提供 了 更 多 的 选择 来 实现 相同 的 功能 ， 比 如 watch 
选项 。 


4.1.5 侦 听 属性 


Vue 允许 开发 者 使 用 侦 听 属性 〈watch 选项 ) 为 实例 添加 被 观察 对 象 ， 并 在 对 象 被 修 
改 时 调用 开发 者 自 定义 的 方法 。 
笔者 使 用 watch 选项 重 构 了 图 4.10 所 用 的 代码 ， 重 构 后 的 代码 如 下 : 


let vm = new Vuel({ 
el: '#app', 
data () { 
return { 
message: 'WAS IT A CAR OR A CAT I SAW', 
// 如 果 人 允许 被 赋值 ， 何 不 直接 放 在 data 中 ? 
noSpaceMsg: 'WASITACARORACATISAW' 


} 


}, 
watch: { // 使 用 watch 实 现 ， 当 元 数据 变化 时 ， 同 步 衍生 数据 的 状态 
message (newValue，oldValue) { // newValue: 修改 后 的 值 ， oldvValue: 
修改 前 的 值 
this.noSpaceMsg = this.message.replace(/\s/g, '') 
} 
} 
}) 


运行 结果 亦 如 上 一 小 节 中 图 4.10 所 示 。 
由 于 watch 更 注重 于 处 理 数据 变化 时 的 业务 逻辑 ， 而 computed 更 注重 于 衍生 数据 ， 
因此 ， 与 computed 相 比 ，watch 还 优 于 可 以 异步 修改 数据 。 下 面 来 看 一 段 示 例 代码 ; 


import axios from "axios'" 
let vm = new Vue({ 
el: '#app', 
data () { 
return { 
message: ' 书 山 有 路 勤 为 径 ， 学 海 无 涯 苦 做 舟 。'， 
remoteMsg: '' 
} 
}, 
watch: { 
message (newValue, oldValue) { 


axios ({ // 发 送 ajazx 异 步 请 求 
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method: ‘'GET"', 
url: '/someurl', 
params: { 
message: newValue 
} 
}) .then (res => { 
this .remoteMsg = res.data.message // 接收 响应 后 ， 异步 修改 数据 值 


在 这 段 代 码 中 ， 笔 者 使 用 watch 选项 为 组 件 异步 获取 ajax 请 求 的 返回 值 ， 而 使 用 
computed 则 无 法 达到 这 样 的 效果 。 
此 外 ，Vue 还 为 watch 选项 提供 了 丰富 的 声明 方式 ， 如 : 


let vm = new Vuel({ 
el: "#app", 
data () { 
return { 
msgs 并 
sender: "'Jack', 
receiver: 'Rose' 
} 
} 
}, 
methods: { 
logLine () { 
console.10g('------------—-—— 分 割 线 -------------- 三 
} 
logMsg (newValue, oldValue) { 
console.1og (newValue) 
} 
}, 
watch: { 
msg: 1{ 
handler: 'logMsg'， // 方法 名 
deep: true， // 深度 观察 : 对 象 任何 层级 数据 发 生变 化 ，watch 方 法 都 会 被 触发 
immediate: true // 立即 调用 : 在 侦 听 开始 时 立即 调用 一 次 watch 方 法 
}, 
"msg.sender': [ "logLine', 'logMsg' ] // 数组 方式 ， 可 调用 多 个 方法 
} 


}) 
感 兴趣 的 同学 可 以 玩 一 玩 ， 这 里 笔者 不 再 多 说 。 
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42 DOM 演 染 
本 节 内 容 主要 讲述 Vue 中 关于 DOM 泻 染 的 一 些 选项 。 


4.2.1 指定 被 挂 载 元 素 


el 选项 可 用 于 指定 Vue 实例 的 挂 载 目标 ， 属 性 值 仅 限 于 CSS 选择 器 或 者 DOM 节点 
对 象 。 
选项 的 相关 用 法 如 下 所 示 : 


<style> 
.fixed-width { 
display: inline-block; 
width: 100px; 
} 
</style> 
<p id="app"><strong class="fixed-width">CSS 选 择 器 : </strong>{{ msg }}</p> 
<p igd="app2"><strong class="fixed-width">DOM 节 点 : </strong>{{ msg }}</p> 
<p id="app3"><strong class="fixed-width"> 手 动 挂 载 : </strong>{{ msg }}</p> 
<button onclick="handleMount () "> 手动 挂 载 </button> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js">e/scoript> 
<script type="text/javascript"> 
let vml = new Vue({ 
el: '#app'， // 选择 器 
data () { 
return { 
msg: 'Hello World' 
. 


} 
}) 
let vm2 = new Vue({ 
el: document .getElementById('app2'), // HTMLElement 
data () { 
return { 
msg: "Hello World' 
} 
} 
}) 
let vm3 = new Vuel({ 
// el: document .getElementById('app3')， // 这 里 未 使 用 el ， 而 是 用 其 等 效用 法 
data () { 
return { 
msg: "Hello World'" 
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} 
}) 
let handleMount = function () { 
vm3. $mount ('#app3") 
. 
</script> 


除 此 之 外 ,Vue 也 允许 开发 者 使 用 $mount 方 法 来 挂 载 实例 , 如 代码 中 vm3 的 挂 载 方式 。 
示例 代码 初始 视图 如 图 4.11 所 示 。 


CSS 选 择 器 : Hello World 
DOM 节 点 : ”Hello World 
手动 挂 载 : 。{{ msg }) 

| 手动 持 载 


4.11 使 用 el 选项 挂 载 Vue 实例 


此 时 ，el 选项 为 CSS 选择 器 和 DOM 节点 形式 的 Vue 实例 已 经 被 成 功 挂 载 。 
当 笔者 点 击 “ 手 动 挂 载 ”按钮 时 ， 视 图 如 图 4.12 所 示 。 


CSS 选 择 器 : Hello World 
DOM 节 点 : ”Hello World 
手动 挂 载 : “Hello World 
Ease] 
4.12 使 用 $mount 方法 挂 载 Vue 实例 


可 以 看 到 ， 无 论 采 用 哪 种 方式 挂 载 实例 ， 得 到 的 结果 都 是 一 样 的 。 不 过 ，Vue 总 是 


愿意 提供 给 用 户 更 多 的 选择 ， 人 允许 开发 者 选择 合适 的 方式 或 时 机 执行 操作 。 


4.2.2 视图 的 字符 串 模 板 


Vue 允许 开发 者 使 用 字符 串 作为 实例 的 模板 ， 模 板 字符 串 由 template 选项 接收 ， 示 


例 的 代码 如 下 : 


<div id="app">target element</div> 


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
is"S</acript> 
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<script type="text/javascript"> 
let vm = new Vuel({ 
el: '#app', 
template: '<hl>template element</hl>' // 模板 节点 将 替换 原 有 DOM 节 点 
二 
</script> 


示例 代码 的 运行 结果 如 图 4.13 所 示 。 


* i 民 遇 | Hements Console sources » J ) 


htal 
cheady< /Mead 
v ¢body 


template element Ts re ne ee 


/body 
/htal 


4.13 ”template 选项 示例 


从 图 4.13 中 可 以 看 到 ，template 选项 创建 了 新 的 DOM 节点 ， 并 替换 掉 原 有 的 节点 。 


4.2.3 ” 演 染 函数 render 


render 函数 同样 也 可 以 用 于 泻 染 视图 ， 它 提供 了 回调 方法 createElement 以 供 我 们 创 
建 DOM 节点 ， 下 面 来 看 一 段 示例 代码 : 


<style> 
btn 1 
outline: none; 
border: none; 
cursor: pointer; 
padding: 5px 12px; 
} 
.btn-text { 
color: #409eff; 
background-color: transparent; 
} 
-btn-text:hover { 
Color: #66b]lff; 
» 
</style> 
<div id="app"> 
<!-- 将 实例 中 fields & goods 传 入 组 件 --> 
<fly-table :fields="fields" :goods="goods"> 
<span slot="title">Fly Table Component</span> 
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</fly-table> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
了 GE 
<script type="text/javascript"> 
Vue .component ('fly-table', { 
props: { // 组 件 接收 外 界 传 入 的 参数 
fields: { 
type: Array, 
default () { 
return [] 
} 
}, 
goods: { 
type: Array, 
default () { 
return [] 
} 
} 
}, 
methods: { 
reverse () { // 定义 数组 倒序 方法 
this .goods .reverse() 
} 
}, 
render (createElement) { // 使 用 render 函 数 泻 染 DOM 
/** 
* createElement 可 接收 三 个 参数 
* 1 。 HTML 标 签字 符 串 ( String ) | 组 件 选项 对 象 ( Object ) | 节点 解析 函数 
(Function ) 
* 2。 定义 节点 特性 的 对 象 ( Object ) 
* 3. 子 节 点 ，createElement 构 建 的 VNode 节 点 或 字符 串 生 成 的 无 标签 文本 节点 
(Array|string) 
A 
return createElement('div', { 
// 作为 子 组 件 时 的 插 槽 名 称 
slot: 'fly-table' 
ly [ 
createElement ('h2' ,this.$slots.title), 
createElement ('button', { 
// class 用 于 绑 定 类 名 ， 同 v-bind:class 的 绑 定 方式 
classs Lhtea', Dienerstls 
// attrs 用 于 绑 定 节点 一 般 属 性 ， 如 id、disabled、title 等 
attrs: 
disabled: false, 
title: ' 点 击 使 数组 倒序 ' 


}, 
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// domProps 用 于 绑 定 节点 DOM 属 性 ， 如 innerHTML、innerText 等 
domProps: { 

innerText: ' 倒 序 ' 
Wy 
on: { 
// 绑 定 事件 ， 使 用 箭头 函数 以 免 创建 函数 作用 域 
ES () 

this .goods .reverse() 
} 


}, 
// 自 定义 指令 
directives: [], 
// 其 他 属性 
key: "btnReverse' 
ref: "btnReverse' 
}), 
createElement ('table', { 
// style 用 于 绑 定 样式 ， 同 v-bind: style 的 绑 定 方式 
style: 1{ 
width: "400px'"， 
textAlign: 'left', 
lineHeight: '42px', 
border: 'lpx solid #eee', 
UserSelect: "none' 


he 
createElement('tr', [ 
this.fields.map (field => createElement ('th', field.prop)) 
) ， 
this.goods .map (item => createElement('tr', { 
style: { 
color: item.isMarked ? '#ea4335°' : '' 
} 
, this.fields.map (field => createElement ('td', { 
style: { 
borderTop: 'lpx solid #eee' 
} 
六 轴 
field.prop !== 'operate'  // 如 果 不 是 操作 列 ， 显 示 文 本 
? createElement ('span'，item[field.prop]) 
: createElement ('button'，{ // 否则 显示 按钮 
classs [bt "tntextnl, 
domProps: { 
innerHTML: ' <span> 切 换 标记 </span> 本 


}, 
ms 如 


click: () => { // 当 按钮 被 点 击 时 ， 切 换 该 行文 本 标记 状态 
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( 被 标记 时 字体 颜色 为 红色 ) 
item.isMarked = !item.isMarked 
} 


让 
// 声明 Vue 实例 
let vm = new Vuel({ 
els "#app”, 
data () { 
return 1{ 
fields: [ 
{ 
label: ' 名 称 '， 
prop: 'name' 


label: ' 数 量 '， 
prop: 'quantity' 
}, 
{ 
label: ' 价 格 '， 
prop: 'price' 
}, 
{ 
Labels 
prop: 'operate'"' 
. 
]， 
goods: [ 
name: "苹果 '"， 


quantity: 200, 
price: 6.8, 
isMarked: false 
jy 
{ 


name: ' 西 瓜 '， 

quantity: 50, 

price: 4.8, 

isMarked: false 
jy 
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name: ' 榴 莲 ' ， 
quantity: 0, 
price: 22.8, 
isMarked: false 
} 
] 
} 
} 
}) 
</script> 


这 段 代码 有 点 复杂 ， 希 望 同 学 们 能 够 参照 着 写 一 下 ， 以 加 深 理解 。 在 这 个 示例 中 ， 
笔者 首先 定义 了 fly-table 组 件 。fly-table 作为 一 个 定制 化 功能 组 件 ， 允 许 用 户 查 看 表格 数 
据 、 倒 序 表格 、 标 记 表 格 数据 等 操作 ， 其 DOM 演 染 由 render 函数 执行 ，DOM 节点 由 
createElement 方 法 创建 。 之 后 , 笔者 定义 了 Vue 实例 , 并 在 实例 作用 域 中 将 数据 传 入 组 件 。 
示例 的 初始 视图 如 图 4.14 所 示 。 


Fly Table Component 


name quantity price operate 
东 果 200 6.8 

西瓜 50 4.8 

稳 直 0 228 


图 4.14 初始 时 的 fly-table 


在 初始 泻 染 表格 数据 时 ， 笔 者 使 用 了 JS 中 Array API 的 map 方法 ， 并 使 用 三 目 运算 
符 判 断 生成 span 节点 还 是 button 节点 。 
当 点 击 “ 倒 序 ” 按 钮 后 ， 视 图 如 图 4.15 所 示 。 


Fly Table Component 


name 。 quantity price operate 
榴 逢 0 228 等 忆 
西瓜 50 48 

节 果 200 68 标志 


图 4.15 倒序 后 的 fy-table 
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当 点 击 “ 标 记 ” 按 钮 时 ， 视 图 如 图 4.16 所 示 。 


Fly Table Component 


name quantity price operate 
杰 莲 

西瓜 50 48 

节 果 200 6.8 


4.16 标记 后 的 fy-table 


template 和 render 选项 均 是 用 于 增加 JS 代码 以 减少 HTML 代码 的 开发 ， 这 样 做 的 好 
处 有 两 个 : 一 使 开发 人 员 可 以 聚焦 于 JS 代码 的 书写 ， 二 也 更 贴近 于 Vue 的 底层 编译 器 。 
相 比 于 template，render 函数 充分 地 体现 了 JS 的 完全 编程 能 力 〈 脱 离 HTML 和 CSS 代码 
的 开发 ) 。 

此 外 , 借助 于 babel-plugin-transform-vue-jsx 插件 , 开发 者 也 可 以 使 用 JSX 语法 。 不 过 ， 
笔者 更 推荐 使 用 Vue 专用 的 单 文件 组 件 ， 这 也 是 Vue 项 目 开发 的 主要 方式 ， 笔 者 将 在 后 
续 章节 中 进行 演示 。 

Iender 函数 的 回调 方法 createElement 允许 开发 者 在 合适 的 位 置 为 DOM 节点 绑 定 监 
听 事 件 。 在 上 述 示例 中 ， 笔 者 演示 了 该 如 何 使 用 : 


on: { 
oR (y = 特 
F 


这 是 为 按钮 绑 定点 击 事件 的 用 法 ， 其 他 事件 的 绑 定 方法 也 大 致 如 此 。 

不 过 , 在 Vue 的 事件 系统 中 , 还 有 一 些 很 重要 的 内 容 , 如 事件 修饰 符 。 在 render 函数 中 ， 
如 何 为 事件 绑 定 修饰 符 呢 ? 

对 于 一 些 不 易 编写 的 事件 修饰 符 ，Vue 提供 了 简写 前 缀 ， 如 表 4.1 所 示 。 


表 4.1 事件 修饰 符 前 缀 


修饰 符 前 缀 说 有 明 
.passive & 移动 端 ， 限 制 事件 永 不 调用 preventDefault() 方法 


.capture j 当 事 件 触发 时 ， 阻 止 事件 捕获 
.once 一 | 事件 被 触发 一 次 后 即 解除 监听 
.Capture.once / .once.capture 一 ! | 事件 被 触发 一 次 后 即 解除 监听 并 阻止 事件 捕获 
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用 法 如 下 : 

on: { 
"click': () => {}, // .capture 
KG (0) => Ty: sonee 
"一 !Imouseover': () => {} // .capture.once 


} 
而 其 他 的 一 些 事件 修饰 符 ， 开 发 者 可 以 使 用 原生 JS 编写 ， 示 例如 表 4.2 所 示 。 


表 4.2 部 分 事件 修饰 符 与 原生 JS 的 对 照 表 
rr 


if (event.target ! 一 event.currentTarget) return 
if (event.keyCode ! 一 13) retum 


用 法 如 下 : 
is 
keyup: function (event) { 
// .self 
if (event.target !== event.currentTarget) return 
// .shift && .enter(.13) 
if (!event.shiftKey || event.keyCode !== 13) return 
J atop 


event .stopPropagation () 
// .prevent 
event .preventDefault () 
} 
} 


下 面 是 有 关 render 函数 的 拓展 内 容 。 

在 HIML 中 ， 任 何 内 容 都 是 节点 ， 即 使 没有 标签 的 文本 也 是 节点 ， 层 层 节点 媒 套 ， 
形成 了 一 棵 DOM 树 ， 如 图 4.17 所 示 。 

在 DOM 中 查询 和 更 新 节点 是 一 件 比较 低 效 的 工作 ， 为 此 ，Vue 提供 了 render 函 
数 和 虚拟 DOM。 虚 拟 DOM 将 对 真实 DOM 发 生 的 变化 进行 追踪 ， 以 降低 DOM 查询 
用 时 。 
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div 
a Ls 覃 
hl button table 
y 时 J 
文本 节点 | |<!-- 注 释 -->| “| 文本 节点 tr tr 
4 于 
也 td td 
了 了 1 
文本 节点 文本 节点 button 
| 
文本 节点 


图 4.17 fly-table 的 DOM 树 结构 


同学 们 有 没有 想 过 在 如 下 代码 中 ，createElement 创建 的 是 什么 呢 ? 


render (createElement) { // 此 处 使 用 createElement 的 常用 简写 h 
return createElement('p', 'Hello World') 
} 


与 document.createElement 不 同 ，render 中 的 createElement 创 建 的 并 不 是 真实 的 
DOM 节点 ， 而 是 虚拟 节点 (Virtual Node，VNode) ， 含 有 开发 者 描述 的 节点 信息 。 由 
VNode 组 成 的 树 形 结构 即 “ 虚 拟 DOM”，Vue 将 通过 虚拟 DOM 在 页 面 上 泻 染 出 真实 的 
DOM., 

最 后 一 点 ， 在 组 件 树 中 ，VNode 必须 保持 其 身份 的 唯一 ， 以 便 Vue 一 一 对 应 地 对 每 
个 真实 的 DOM 节点 进行 追踪 。 


4.2.4 选项 的 优先 级 


我 们 可 以 发 现 ，el、template、render 三 个 选项 的 功能 是 一 致 的 一 一 获取 实例 模板 〈 指 
定 或 是 创建 ) 。 然 而 ， 当 实例 同时 存在 这 三 个 选项 时 ，Vue 将 如 何 处 理 呢 ? 下 面 我 们 通 
过 几 个 示例 来 观察 一 下 。 

(1) 当 el、render、template 共存 时 ， 代 码 如 下 : 


<div id="app"> 
<hl>el: {{ msg }}</hl> 
</div> 
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<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
let vm = new Vuel({ 
el: '#app', 
render (c) { 
return c('hl', 'render: ' + this.msg) 
}, 
template: '<hl>template: {{ msg }}</hl> ', 
data () { 
return { 
msg: 'I want Youl 
} 
} 
}) 
</script> 


运行 结果 如 图 4.18 所 示 。 


render: | want you! 


net/npn/ 
seript 
escript: 


图 4.18 el、template、render 共存 时 


在 这 个 示例 中 ，Vue 优先 采用 了 render 选项 创建 的 模板 。 
(2) 当 el、template 共存 时 ， 实 例 代 码 如 下 : 


let vm = new Vue({ 
ls "4app"; 
template: '<hl>template: {{ msg }}</hl> ' 
data () { 
return { 
msg: 'I want you!' 
3 
} 
}) 


运行 结果 如 图 4.19 所 示 。 


template: | want you! = 这 


4.19 el、template 共存 时 
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可 以 看 到 ， 此 时 Vue 优先 采用 了 template 选项 创建 的 模板 。 


43 封装 复 用 


本 节 主 要 讲述 Vue 中 关于 封装 复 用 的 内 容 ， 属 于 Vue 中 的 进 阶 知识 ， 在 实战 中 对 开 
发 者 的 抽象 和 泛 化 能 力 有 一 定 的 要 求 。 


4.3.1 过 滤器 


filters 选项 用 于 定义 在 当前 组 件 或 实例 作用 域 中 可 用 的 过 滤器 ， 可 在 双 括 号 插值 
(Mustache 语法 ) 中 添加 在 Javascript 表达 式 的 尾部 ， 以 管道 符号 “|” 与 表达 式 隔 开 ， 
表达 式 的 值 将 作为 参数 传 入 filter 中 。 下 面 来 看 一 段 示 例 代码 : 


<div id="app"> 
<h1>{{ title }}</h1l> 
<hl>{{ title | supplyTitlel }}</hl> 
<!-- 存在 多 个 filter 时 ,将 从 左 向 右 执行 --> 
<hl>{{ title | supplyTitlel | supplyTitle2 }}</hl> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
let vm = new Vuel({ 
eal: "#app", 
data () { 
return { 
title: 'Test#%for#%Filter."' 
} 
}, 
filters: { 
supplyTitlel (value) { // 表达 式 的 值 将 作为 形 参 传 入 
console.1og('SupplLY Title 17) 
Feturn value.replace(/#/g, ' ') 
和 
supplyTitle2 (value) { 
console.1og('SupplY Title 2') 
return value.replace(/%$/g, '') 
} 
} 
}) 
</script> 
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在 上 述 代 码 中 ， 笔 者 定义 了 两 个 flter 用 以 格式 化 标题 ， 示 例 代 码 运行 结果 如 图 4.20 
所 示 。 


Test#%for#%Filter. 
Test %for %Filter. 


Test for Filter. 
图 4.20 过 滤器 


当 存 在 多 个 filter 时 ，Vue 将 从 左 向 右 执行 过 滤 ， 并 将 上 一 次 过 滤 的 结果 作为 下 一 次 
过 滤 的 输入 值 。 

除 在 组 件 中 定义 filter 之 外 ，Vue 还 允许 开发 者 在 全 局 定义 flter， 全 局 filter 的 使 用 
方法 与 选项 filter 一 致 ， 定 义 的 方法 如 以 下 代码 : 


Vue.filter ('supplyTitlel'，value => { // 表达 式 的 值 将 作为 形 参 传 入 
console.1log('Supply Title 17) 
return value.replace(/#/g, ' ') 

}) 

Vue.filter ('supplyTitle2'，value => { // 表达 式 的 值 将 作为 形 参 传 入 
console.1log('Supply Title 2') 
return value.replace(/%/g, '') 

}) 


代码 的 运行 结果 如 图 4.20 所 示 。 
与 选项 filter 不 同 的 是 ， 全 局 flter 可 以 在 任何 组 件 和 实例 中 起 作用 。 


4.3.2 自 定义 指令 


在 之 前 的 章节 中 ， 我 们 接触 过 一 些 Vue 提供 的 “ 开 箱 即 用 ”的 指令 ， 如 v-bind、v-on、 
Vv-model 等 。 除 了 这 些 指令 外 ，Vue 也 人 允许 我 们 使 用 一 些 自 定义 的 指令 。 在 组 件 和 实例 中 ， 
这 些 自 定义 指令 应 该 被 声明 在 directives 选项 中 。 

Vue 为 自 定义 指令 提供 了 如 下 几 个 钩子 函数 〈 均 为 可 选 ): 

@ bind: 指令 与 元 素 绑 定时 调用 。 

@ inserted: 指令 绑 定 的 元 素 被 挂 载 到 父 元 素 上 时 调用 。 
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Update: 指令 所 在 VNode 更 新 时 调用 ， 可 能 发 生 在 其 子 VNode 更 新 之 前 。 
componentUpdated: 指令 所 在 VNode 及 其 子 VNode 全 部 更 新 后 调用 。 
unbind: 指令 与 元 素 解 绑 时 调用 。 


同时 ， 钩 子 函数 会 被 传 入 以 下 参数 : 


el: 指令 所 绑 定 元 素 ， 可 用 于 操作 DOM。 
binding: 包含 指令 相关 属性 的 对 象 。 


binding 包含 以 下 属性 : 


name: 指令 名 称 。 

Value: 指令 绑 定 的 值 ， 如 在 v-some=“2*2” 中 ， 绑 定 值 为 4。 

oldValue: 指令 值 改变 前 的 值 , 仅 在 update 和 componentUpdated 钩子 函数 中 可 用 。 
expression: 字符 串 类 型 的 指令 表达 式 ， 如 在 v-some=“2*2” 中 ， 值 为 “2*2”。 
arg: 传 给 指令 的 参数 ， 如 在 v-some:someValue 中 ， 值 为 “someValue”。 
modifiers: 修饰 符 对 象 ， 如 在 V-some.upper 中 ， 值 为 {upper: tue}。 

Vvnode: 虚拟 节点 。 

oldNode: 虚拟 节点 更 新 前 的 值 ， 仅 在 update 和 componentUpdated 钩子 函数 中 
可 用 。 


下 面 笔 者 将 演示 一 个 相关 示例 ， 同 学 们 可 以 参照 着 示例 进行 理解 ， 示 例 代码 如 下 : 


<div id="app"> 


<hl v-some.upper>{{ title }}</hl> 

<hl v-some.lower>{{ title }}</hl> 

<hl v-style="style">{{ title }}</hl> 

<button @click="handlestyle"> 修 改 v-style</button> 


</div> 

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
Jj/serint> 

<script type="text/javascript"> 


let vm = new Vuel({ 
el: '#app', 
data () { 
return { 
title: "Test for Directive.', 
style: { // v-style 的 参数 
fontstyle: "italic'" 
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handlestyle () { 
this.$set (this.style, 'color', '#ababab') 
this.$set (this.style, 'transform', 'rotatex(45deg)') 
} 
}, 
directives: { 
style: { // 用 于 为 节点 绑 定 样式 
bind (el, binding, vnode) { 
CONSOl8:169 ("$C====--=-= bind 参 数 : el, binding, vnode ------ 
---", "font-size: 18px;") 
console.10og('%o\n\ns$o\n\n%so', el, binding, vnode) 
let styles = binding.value // 获取 指令 绑 定 的 值 
Object.keys (styles) .forEach (key => el.style[key] = styles[key]) 
}, 
update (el, binding, vnode, oldVnode) { 
console.1og('sc---- update 参 数 : el, binding, vnode, oldVnode 
----' 7 'font-size: 18px;"') 
console.10g('%$o\n\n$so\n\nso\n\n%o', el, binding, vnode, oldVnode) 
let styles = binding.value // 获取 指令 绑 定 的 值 
Object.keys (styles) . forEach (key => el.style[key] = styles [key]) 
} 


}, 
// 在 bind 和 update 时 触发 相同 行为 ， 且 无 需 定义 其 他 钩子 函数 
// 指令 可 以 简写 为 以 下 形式 
some (el, binding) { 
let text = el.innerText 
let modifiers = binding.modifiers 
if (modifiers.upper) { // 如 果 带 有 upper 后 级 ， 则 大 写 文本 
el.innerText = text.toUpperCase() 
} 
if (modifiers.lower) { // 如 果 带 有 lower 后 级， 则 小 写 文 本 
el.innerText = text.toLowerCase() 
} 
} 
} 
}) 
</script> 


笔者 在 上 述 代 码 中 定义 了 v-some 和 v-style 两 个 指令 。v-some 根据 后 级 的 upper 
或 .lower 修饰 符 对 文本 进行 大 小 写 格式 化 ，v-style 接收 一 个 样式 对 象 ， 用 于 为 节点 绑 定 
样式 。 

通过 实 操 可 以 发 现 ， 在 自 定义 指令 中 ， 最 大 的 关注 点 是 bind 和 update 这 两 个 钩子 函 
数 ， 且 这 两 个 钩子 函数 在 很 多 时 候 业 务 逻 辑 基 本 一 致 ， 而 其 他 钩子 函数 只 有 在 特殊 情况 
下 才 会 用 到 。 因 此 ，Vue 为 自 定义 指令 提供 了 简写 ， 只 关注 bind 和 update 钩子 函数 ， 如 
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上 述 代 码 中 v-some 指令 的 定义 方式 。 
示例 代码 初始 运行 结果 如 图 4.21 所 示 。 


TEST FOR DIRECTIVE. 
test for directive. 


Test for Directive. 


| vsye 


rray(1), tert: néefined, clat Md, ~} 


图 4.21 自 定义 指令 ( bind ) 


当 点 击 “ 修 改 v-style” 按 钮 后 ， 运 行 结果 如 图 4.22 所 示 。 


Update 参数 ,el，binding，vnode，oldvnode 


TEST FOR DIRECTIVE. 
test for directive. 
Test for Directive. 


| vslyle 


图 4.22 自 定义 指令 ( update ) 


同 filter 一 样 ，Vue 也 允许 开发 者 定义 全 局 指令 ， 定 义 方式 参见 以 下 代码 : 


Vue.directive('style'，1{ // 用 于 为 节点 绑 定 样式 
bind: function (el, binding, vnode) { 
console.10g("%®C—===——=== bind 参 数 : el, binding, vnode --------- ' 
"font-size: 18px;') 
console.log('%so\n\nso\n\n%so', el, binding, vnode) 
let styles = binding.value // 获取 指令 绑 定 的 值 
Object .keys (styles) .forEach (key => el.style[key] = styles [key]) 
}, 
update: function (el, binding, vnode, oldVvnode) { 
console-1og('sc---- update 参 数 : el, binding, vnode, oldVnode -——-—-', 
"font-size: 18px;"') 
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console.1log('%$0o\n\nso\n\nso\n\n%o', el, binding, vnode, oldVnode) 
let styles = binding.value // 获取 指令 绑 定 的 值 
Object.keys (styles) .forEach (key => el.style[key] = styles [key]) 
} 
. 
// 在 bind 和 update 时 触发 相同 行为 ， 且 无 需 定义 其 他 钩子 函数 
// 指令 可 以 简写 为 以 下 形式 
Vue.directive('some', function (el, binding) { 
let text = el.innerText 
let modifiers = binding.modifiers 
if (modifiers.upper) { // 如 果 带 有 upper 后 级， 则 大 写 文本 
el.innerText = text.toUpperCase() 
} 
if (modifiers.lower) { // 如 果 带 有 1lower 后 级 ， 则 小 写 文本 
el.innerText = text.toLowerCase() 
} 
} 


运行 结果 如 图 4.21、 图 4.22 所 示 。 


4.3.3 ”组 件 的 注册 


components 选项 用 于 为 组 件 注册 从 外 部 引入 的 组 件 ， 由 于 子 组 件 并 非 在 全 局 定义 ， 
因此 不 可 以 直接 在 父 组 件 的 作用 域内 使 用 。 选 项 常见 的 应 用 场景 有 引入 第 三 方 库 中 的 组 
件 和 自 定义 组 件 等 。 

下 面 来 看 一 段 示例 代码 : 


<div id="app"> 
<easy-title></easy-title> 
<easy-wish></easy-wish> 
<easy-motto></easy-motto> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></ 
script> 
<script type="text/javascript"> 
let EasyTitle = { // EasyTitle 组 件 
name: "EasyTitle'"， 
template: '<hl> 大 器 当成 </h1l>' 
} 
let EasyMotto = { // EasyMotto 组 件 
name: 'EasyMotto", 
template: '<p> 过 一 方 水 土 ， 历 一 番 人 事 ， 方 知 天 地 不 仁 ， 万 物 刍 狗 </p>' 
} 
let EasyWish = { // EasyWish 组 件 
name: "EasyWish'， 
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template: '<p> 白 发 渔 樵 隐 深 山 ， 浮 名 穷 利 岂 愿 泪 。</p>' 
} 
let vm = new Vue({ // vue 实例 
61l: "#app", 
components: { EasyTitle, EasyMotto, EasyWish } 
}) 
</script> 


示例 的 运行 结果 如 图 4.23 所 示 。 


大 器 当成 eg 


白 发 渔 柑 隐 深 山 ， 浮 名 穷 利 央 愿 沾 。 
过 一 方 水 土 ， 历 一 番 人 事 ， 方 知 天 地 不 仁 ， 万 物 刍 狗 


4.23 组件 的 注册 和 引用 


在 这 个 示例 中 ， 笔 者 定义 了 EasyTitle、EasyWish 和 EasyMotto 三 个 组 件 ， 并 使 用 
components 选项 将 其 注册 到 实例 中 。 在 vue-devtools 中 ， 我 们 可 以 看 到 组 件 的 结构 。 


4.3.4 混入 的 使 用 


与 components 选项 相似 ，mixins〈 混 入 ) 选项 也 用 于 注册 在 外 部 封装 好 的 代码 ， 不 
过 这 些 代码 更 加 碎片 化 ， 并 不 如 组 件 一 样 成 体系 ， 混 入 的 目的 在 于 灵活 地 分 发 组 件 中 一 
些 可 复 用 的 功能 。 

mixins 可 以 将 一 些 封装 好 的 选项 混入 另 一 个 组 件 中 。 在 混入 过 程 中 ， 如 果 没 有 发 生 
冲突 , 则 执行 合并 如 果 发 生 冲 突 且 用 户 没 有 指定 解决 策略 , Vue 将 采用 默认 策略 , 如 表 4.3 
所 示 。 


表 4.3 混入 冲突 时 的 默认 策略 
冲突 选项 合并 策略 冲突 策略 
data 合并 根 节点 数据 优先 采用 组 件 的 数据 


mounted 等 钩子 函数 混合 为 数组 全 部 调用 且 先 调用 mixin 的 钩子 函数 


methods/components/directives 等 混 为 同一 对 象 优先 采用 组 件 的 键 值 对 
watch 混合 为 数组 全 部 调用 且 先 调用 mixin 的 watch 方法 
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下 面 来 看 一 段 示例 代码 : 
<style> 
#app { 
color: #2c3e50; 
font-family: Roboto, sans-serif; 
下 
.label { 
display: inline-block; 
min-width: 160px; 
下 
</style> 
<div id="app"> 
<hil>{{ title }}</hl> 
<p><strong class="label">Text:</strong>{{ text }}</p> 
<p><strong class="label">Plus Text:</strong>{{ plusText }}</p> 
<p><strong class="label">Upper Text:</strong>{{ text | supplyUpper 
}1</p> 
<button @click="toggleText"> 切 换文 本 </button> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
// 强 耦 合 ， 需 要 被 混入 组 件 的 data 根 节点 中 包含 text 属 性 
let mixin = { 
data () { 
return 1{ 
title: 'Test for mixin' 
} 
}, 
mounted () { 
console.1og('mixin mounted') 
}, 
methods: { 
toggleText () { 
this .text = "mixin text'" 
} 
}, 
computed: { 
plusTezxt () { // 此 处 需要 创建 函数 作用 域 以 使 this 指 向 Vue 实 例 
Teturn tT " + Ehis.text + 二 4? 
} 
}, 
filters: { // 选项 过 滤器 
supplyUpper: value => value.toUpperCase() 
}, 
watch: { // 监听 器 
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text (value) { 
console.1og('mixin text: ' + value) 
} 
F 
let vm = new Vuel({ 
el: '#app', 
mixins: [ mixin ]， 
data () { 
return { 
titla: WW Tities 
text: 'which one?" 
让 
}, 
mounted () { 
console.1og('instance mounted') 
}, 
methods: { 
toggleText () { 
this.text = 'instance text' 
} 
}， 
watch: { 
text (value) { 
console.1og('instance text: ' + value) 
} 
, 
1 
</script> 


在 这 段 代码 中 ， 笔 者 定义 了 名 为 mixin 的 混入 并 将 其 注入 Vue 实例 中 ， 示 例 代码 的 
运行 结果 如 图 4.24 所 示 。 


民 贡 | Bements Console » RC 
A Title 加 Siw | Fie De 
mixin mounted i 
Text: hh ne ,nstanee oorted 
Plus Text: + Which one? + 
Upper Text: WHICH ONE? 
| 加 换文 本 | 


图 4.24 mixin 与 组 件 选项 冲突 的 默认 解决 策略 ( 1 ) 


从 图 4.24 中 可 以 看 到 ， 组 件 合并 了 mixin 混入 的 选项 。 在 处 理 data 选项 冲突 时 ， 
Vue 选用 了 组 件数 据 ; 在 处 理 mounted 钧 子 函数 时 ，Vue 先行 调用 mixin 的 钩子 函数 ， 同 
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时 ，Vue 也 将 mixin 中 的 computed 和 filters 选项 合并 到 组 件 中 。 
当 点 击 “切换 文本 ”按钮 时 ， 视 图 如 图 4.25 所 示 。 


民 人 | Hements Console » i x 
A Title 四 @ 
Text: instance text 
Plus Text: + instance text + 
Upper Text: INSTANCE TEXT 
切换 文本 | 


图 4.25 mixin 与 组 件 选项 冲突 的 默认 解决 策略 (2 ) 


此 时 ，mixin 和 组 件 的 watch 方法 都 被 调用 ， 这 意味 着 Vue 在 处 理 watch 选项 时 ， 采 
用 了 和 处 理 mounted 等 钩子 函数 一 样 的 策略 。 

Vue 也 允许 开发 者 使 用 Vue.mixin 定义 全 局 mixin， 不 过 这 将 为 所 有 组 件 和 示例 混入 
mixin 选项 ， 笔 者 建议 不 要 这 么 做 ， 这 会 使 得 组 件 结构 十 分 混乱 ， 甚 至 让 选项 数据 在 哪 被 
定义 的 都 无 从 查 起 。 

到 这 里 ， 本 章 内 容 基 本 结束 ， 笔 者 在 章节 中 所 举 示例 均 是 复制 下 来 即 可 运行 的 ， 希 
望 同 学 们 能 够 参照 代码 亲自 操作 一 下 。 

在 本 章 所 介绍 的 选项 之 外 ，Vue 还 提供 了 其 他 一 些 选项 ， 由 于 这 些 选 项 对 于 实战 开 
发 并 不 重要 ， 所 以 笔者 在 此 不 多 论述 ， 有 兴趣 的 同学 可 以 查阅 官方 文档 进行 研究 。 
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除了 允许 用 户 自 定义 组 件 之 外 ，Vue 还 内 置 了 一 些 组 件 ， 以 帮助 用 户 高 效 地 开发 
一 些 功能 。 本 章 将 带领 大 家 一 起 来 了 解 这 些 内 置 组 件 。 


5.1 组 件 服务 


本 节 主 要 介绍 一 些 辅 助 用 户 进行 组 件 开发 的 内 置 组 件 ， 内 容 包 括 动态 组 件 的 开发 、 
使 用 插 槽 分 发 内 容 和 缓存 组 件 。 


5.1.1 动态 组 件 


在 某 些 场景 ， 往 往 需要 我 们 动态 切换 页 面部 分 区 域 的 视图 ， 这 个 时 候 内 置 组 件 
component 就 显得 尤为 重要 。 

component 接收 一 个 名 为 is 的 属性 ，is 的 值 应 为 在 父 组 件 中 注册 过 的 组 件 的 名 称 ， 
用 法 如 下 : 


<component :is="view"></component> <!-- view 为 变量 --> 
下 面 来 看 一 个 示例 ， 代 码 如 下 : 
<style> 
.tabs { 
margin: 0; 
padding: 0; 


list-style: none; 
’ 
“per-tab A 
display: inline-block; 
width: 120px; 
line-height: 32px; 
border-left: lpx solid #ccc; 
border-top: lpx solid #ccc; 
¥ 
.per-tab:last-child { 
border-right: lpx solid #ccc; 
p 
-tab-content { 
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height: 240px; 
border: lpx solid #ccc; 
} 
</style> 
<div id="app"> 
<ul class="tabs"> 
<1i class="per-tab" @click="toggleView('Home')">Home</1i><!-—-— 
--><1i class="per-tab" @click="toggleView('About')">About</1i> 


</ul> 
<div class="tab-content"> 
<component :is="view"></component> <!-- view 为 变量 --> 
</div> 
</div> 


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
了 SC 
<script type="text/javascript"> 
let Home = { // Home 组 件 
template: '<p style="color: #787878;">Hello Home!</p>" 
} 
let About = { // About 组 件 
template: '<p>Hello About!</p>"' 
小 
let vm = new Vue({ // Vue 实 例 
als $ape 
components: { Home, About }, 
data () { 
return { 
View: 'Home' 
} 
}, 
methods: { 
toggleView (view) { 
this.view = view 
出 
} 
; 
</script> 


在 这 段 代码 中 ， 笔 者 定义 了 Home 和 About 两 个 组 件 ， 并 使 用 components 选项 将 其 
注册 到 实例 vm 中 。 初 始 时 ， 笔 者 设置 is 的 值 为 Home， 此 时 实例 加 载 了 Home 组 件 ， 视 
图 如 图 5.1 所 示 。 
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Home About 


Hello Home! 


图 5.1 初始 加 载 Home 组 件 


之 后 点 击 About 选项 卡 ， 视 图 如 图 5.2 所 示 。 


Home About 


Hello About! 


图 5.2 切换 为 About 组 件 


可 以 看 到 ， 此 时 实例 加 载 了 About 组 件 。 


5.1.2 ”使 用 插 槽 分 发 内 容 
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通过 props 选项 ， 组 件 可 以 接收 多 态 的 数据 。 不 过 ， 如 果 我 们 希望 组 件 也 能 接收 多 


态 的 DOM 结构 呢 ? 
其 实 ， 实 现 方法 有 很 多 ， 比 如 使 用 props 配合 v-html 等 。 这 生 


且 ，Vue 提供 了 一 种 更 


简单 的 选择 ， 使 用 内 置 组 件 slot 〈 播 槽 ) 分 发 内 容 。 


在 定义 多 个 插 槽 时 , 我 们 可 以 使 用 name 属 性 对 其 进行 区 分 , 如 果 没有 指定 name 属性 ， 


则 Vue 会 将 所 有 的 插 槽 内 容 置 于 默认 插 槽 default 中 。 
下 面 来 看 一 段 示 例 代 码 : 


<div id="app"> 
<slot-test> 
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<p> 使 用 插 模 分 发 内 容 </P> 
<hl slot="header"> 插 槽 测试 !'</h1> 
<p> 在 组 件 中 ， 没 有 指定 插 模 名 称 的 元 素 将 被 置 于 默认 插 模 中 </p> 
<p slot="none"> 指 定 到 不 存在 的 插 槽 中 的 内 容 将 不 会 被 显示 </p> 
</slot-test> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
CR 
<script type="text/javascript"> 
let SlotTest = { 
template: '<div>' + 
'<slot name="header"> 相 当 于 占 位 元 素 ， 因 此 这 些 文字 也 不 会 被 泻 染 </slot>' + // 
具名 插 模 
'<slot></slot>' + // 默认 插 槽 
'</div>"' 
} 
let vm = new Vue({ // Vue 实 例 
el: '#app', 
components: { SlotTest } 
}) 
</script> 


在 这 段 代 码 中 ， 笔 者 为 SlotTest 组 件 添 加 了 具名 插 模 header 和 默认 插 槽 ， 并 在 父 组 
件 中 将 DOM 分 发 到 不 同 的 插 槽 中 ， 运 行 结果 如 图 5.3 所 示 。 


插 模 测试 ! 


使 用 插 槽 分 发 内 容 
在 组 件 中 ， 没 有 指定 插 权 名 称 的 元 素 将 被 置 于 默认 插 模 中 


图 5.3 使 用 插 模 分 发 内 容 


可 以 看 到 ， 父 组 件 的 元 素 被 成 功 分 发 到 对 应 的 插 模 中。 

除 此 之 外 ，Vue 还 提供 了 作用 域 插 权 slot-scope (在 Vue 2.5.0 以 下 版 本 为 scope， 只 
可 用 于 template 元 素 ) 。 我 们 可 以 使 用 slot-scope 获取 子 组 件 回 传 的 数据 ， 用 来 在 父 组 件 
中 执行 多 态 的 泻 染 或 响应 。 
为 了 使 父 组 件 中 的 slot-scope 生效 ， 我 们 还 需要 在 子 组 件 中 将 有 关 的 数据 绑 定 到 插 槽 
中 。 笔 者 将 之 前 render 选项 小 节 中 的 示例 代码 改造 了 一 下 ， 用 以 演示 这 个 特性 的 用 法 ， 
改造 后 的 代码 如 下 : 


<style> 
btn 款 
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outline: none; 
border: none; 
cursor: pointer; 
padding: 5px 12px; 
时 
-btn-text { 
color: #409eff; 
background-color: transparent; 
} 
.btn-text:hover { 
Color: #66b]lff; 


} 

-fly-table { 
width: 400px; 
text-align: left; 
line-height: 42px; 
border: lpx solid #eee; 
user-select: none; 

} 

</style> 


<div id="app"> 
<h2>Fly Table Component</h2> 
<button 
class="btn btn-text" 
title=" 点 击 使 数组 倒序 " 
Q@click="handleReverse"> 
倒序 
</button> 
<fly-table 
:fields="fields" 
:goods="goods"> 
<!-- 组 件 标签 包 庄 着 的 内 容 将 被 分 发 --> 
<!-- 思考 下 : 是 否 可 以 在 fly-table 组 件 中 直接 书写 这 段 代 码 ? --> 
<template slot-scope="{ row, col }"> 
<span 
VvV-if="col.prop !== 'operate'"> 
{{ row[col.prop] }} 
</span> 
<button 
class="btn btn-text" 
V-else 
@click="handleMarked (row) "> 
切换 标记 
</button> 
</template> 
</fly-table> 
</div> 
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<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
let FlyTable = { 
props: { // 组 件 接收 从 父 组 件 传 入 的 数据 
fields: { 
type: Array, 
default () { 
return [] 
} 
}, 
goods: { 
type: Array, 
default () { 
return [] 
} 
} 
二 
template: function () { 
return '<table class="fly-table">\n' + 
4 Er>NE 二 
” <th\n' + 
, V-for=" (col, cIndex) in fields"\n' + 
:key="cIndex">\n' + 
'» {{ col.label }}\n' + 
4 </th>Nn" + 
时 /EESNDY + 
<tE\m 于 
: Vv-for=" (row, rIndex) in goods"\n' + 
2 :key="rIndex"\n' + 
:style="{color: row.isMarked ? \'#ea4335\' : \'\'}">\n' + 
y <td\n' + 
style="border-top: lpx solid #eee"\n' + 
Vv-fo (col, cIndex) in fields"\n' + 
:key="cIndex">\n' + 
// slot 应 写 在 子 组 件 中 ， 用 于 接收 父 组 件 分 发 的 内 容 
' 
' 


<slot :row="row" :col="col"></slot>\n' + 


</tds\a" + 
有 </tr>\n' + 
' </table>' 


}10 


' 

// 声明 Vue 实例 

let vm = new Vuel({ 
el: '#app', 
components: { FlyTable }, 
data () { 
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return { 
fields: [ 
{ 
label: ' 名 称 '， 
prop: "name'" 
}, 


iabel: “数量 "， 
prop: "quantity'" 
} 


label: ' 价 格 '， 
prop: 'price' 
}, 


labels 7 
prop: 'operate' 
} 
]， 
goods: [ 
{ 
name: "苹果 '， 
quantity: 200, 
price: 6.8, 
isMarked: false 
}, 
{ 


name: ' 西 瓜 '， 
quantity: 50, 
price: 4.8, 
isMarked: false 
}, 
{ 
name: ' 榴 莲 '， 
quantity: 0, 
price: 22.8, 
isMarked: false 


» 
}, 
methods: { 
handleReverse () { 
this.goods.reverse() 
bs 
handleMarked (row) { 
row.isMarked = !row.isMarked 
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jh 
</script> 
笔者 在 这 段 代码 中 定义 了 fly-table 组 件 ， 它 接收 fields 和 goods 属性 ， 用 以 动态 显示 
表格 数据 。 笔 者 在 调用 fly-table 时 ， 还 提供 了 倒序 数组 的 功能 ， 并 使 用 slot-scope 根据 数 
据 的 不 同 进行 多 态 的 视图 泻 染 。 显 然 ， 在 改造 之 后 ，fly-table 组 件 的 复 用 性 更 好 。 页 面 的 
初始 视图 如 图 5.4 所 示 。 


Fly Table Component 

name quantity price operate 
至 时 200 6.8 

西瓜 50 4.8 

榴莲 0 22.8 


图 5.4 初始 时 的 fy-table 


当 点 击 “ 倒 序 ” 按 钮 后 ， 页 面 如 图 5.5 所 示 。 


Fly Table Component 


name quantity price operate 
攀 血 0 22.8 

西瓜 50 48 

东 果 200 6.8 


图 5.5 倒序 后 的 fly-table 


当 点 击 “ 标 记 ” 按 钮 后 ， 页 面 如 图 5.6 所 示 。 
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Fly Table Component 

name quantity price operate 
格 莲 ) 8 

西瓜 50 48 

革 果 200 6.8 


图 5.6 标记 后 的 fy-table 


虽然 我 们 可 以 在 fly-table 组 件 中 直接 书写 条 件 泻 染 代码 ， 并 通过 Semit 和 v-on 处 理 
事件 ， 但 笔者 要 重申 的 一 点 是 ， 组 件 应 该 尽 可 能 地 满足 可 复 用 的 原则 ， 而 不 应 过 多 地 定 
制 一 些 内 容 。 我 们 应 该 尽 可 能 多 地 使 用 一 些 Vue 提供 的 功能 和 机 制 进行 设计 和 开发 ， 毕 
竞 它 本 身 就 是 一 种 最 佳 实践 的 集合 。 


5.1.3 组 件 的 缓存 


keep-alive 是 一 个 抽象 组 件 ， 即 它 既 不 泻 染 任何 DOM 元 素 ， 也 不 会 出 现在 组 件 结构 
树 中 。 我 们 可 以 使 用 它 缓 存 一 些 非 动 态 的 组 件 实例 〈 没 有 或 不 需要 数据 变化 ) ， 以 保留 
组 件 状态 或 减少 重新 泻 染 的 开销 。 

keep-alive 应 出 现在 组 件 被 移 除 之 后 需要 再 次 挂 载 的 地 方 ， 比 如 使 用 动态 组 件 时 : 


<keep-alive> 
<component :is="view"></component> 
</keep-alive> 


或 者 使 用 v- 计 时; 
<keep-alive> 
<one v-if="isOne"></one> 
<two v-else></two> 
</Kkeep-alive> 


它 还 可 以 接收 include 和 exclude 两 个 props 属性 : 

@ include 字符 串 或 正则 表达 式 。 只 有 匹配 的 组 件 会 被 缓存 。 

@ exlude 字符 串 或 正则 表达 式 。 任 何 被 匹配 的 组 件 将 不 会 被 缓存 。 

当 组 件 在 keep-alive 内 被 切换 时 ， 它 的 activated 和 deactivated 这 两 个 生命 周期 钧 子 
函数 将 会 被 执行 。 
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5.2 过 渡 效 果 


本 节 将 介绍 关于 过 渡 效 果 的 组 件 。 当 然 ， 我 们 也 可 以 使 用 原生 的 CSS 或 JS 来 实现 
这 些 动画 效果 ， 但 Vue 无 疑 提供 了 更 简单 和 高 效 的 方式 。 


5.2.1 单 节点 的 过 渡 


Vue 提供 了 标签 为 transition 的 内 置 组 件 ， 在 下 列 情形 中 ， 我 们 可 以 给 任何 元 素 和 组 
件 添加 进入 / 离开 时 的 过 渡 动 画 : 
@ 元 素 或 组 件 初始 泻 染 时 
@ 元 素 或 组 件 显示 /隐藏 时 (使 用 v- 让 或 vshow 进行 条 件 泻 染 时 ) 
@ 元 素 或 组 件 切换 时 
Vue 允许 用 户 使 用 CSS 和 JS 两 种 方式 来 定义 过 渡 效 果 。 
在 使 用 CSS 过 渡 时 ， 我 们 需要 预 置 符合 Vue 规则 的 带 样式 的 类 名 ， 这 些 类 名 用 于 定 
义 过 渡 不 同 阶段 时 的 样式 : 
@ Vv-enter: 定义 进入 过 渡 的 开始 状态 。 在 元 素 被 插入 前 生效 ,被 插入 后 的 下 一 帧 移 除 。 
@ _ v-enter-active: 定义 进入 过 渡 生 效 时 的 状态 。 在 整个 进入 过 渡 阶 段 中 应 用 ， 在 元 
素 被 插入 之 前 生效 ， 在 过 渡 /动画 完成 之 后 移 除 。 这 个 类 可 以 用 来 定义 进入 过 渡 
的 过 程 时 间 、 延 迟 和 曲线 函数 等 。 
@ Vv-enter-to: (Vue 2.1.8 及 以 上 版 本 ) 定义 进入 过 渡 结 束 时 的 状态 。 在 元 素 被 插入 
后 的 下 一 帧 生效 ( 此 时 Vv-enter 被 移 除 ) ， 在 过 渡 / 动画 完成 之 后 移 除 。 
@ v-leave: 定义 离开 过 渡 的 开始 状态 -在 离开 过 渡 被 触发 时 立刻 生效 ,下 一 帧 被 移 除 。 
@ V-leave-active: 定义 离开 过 渡 生 效 时 的 状态 。 在 整个 离开 过 渡 的 阶段 中 应 用 ， 在 
离开 过 渡 被 触发 时 立刻 生效 ， 在 过 渡 /动画 完成 之 后 移 除 。 这 个 类 可 以 被 用 来 定 
义 离开 过 渡 的 过 程 时 间 、 延 迟 和 曲线 函数 。 
@ V-leave-to: (Vue 2.1.8 版 及 以 上 版 本 ) 定义 离开 过 渡 的 结束 状态 。 在 离开 过 渡 被 
触发 之 后 下 一 帧 生效 ( 此 时 V-leave 被 移 除 )， 在 过 渡 / 动画 完成 之 后 移 除 。 
当 实 例 中 存在 多 个 不 同 的 动画 效果 时 ， 我 们 可 以 使 用 自 定义 前 缀 蔡 换 v-， 比 如 使 用 
slide-enter 蔡 换 v-enter， 不 过 这 需要 赋予 transition 元 素 name 属性 。 
下 面 来 看 一 个 示例 ， 代 码 如 下 : 
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<style> 
/* 在 此 处 声明 过 渡 样 式 类 ， 从 一 个 状态 过 渡 到 另 一 个 状态 * 
.Vv-enter, 


.Vv-leave-to { 
opacity: 0; 
} 
.Vv-enter-active, 
.Vv-leave-active { 
transition-property: opacity; /* 过 渡 属 性 */ 
transition-delay: 100ms; /* 延迟 */ 
transition-duration: 900ms; /* 过 渡 时 长 */ 
transition-timing-function: linear; /* 贝 塞 尔 曲线 (动画 速度 曲线 ) */ 
} 
.rotate-enter, 
.rotate-leave-to { 
transform: rotateYy (90deg); 
} 
.rotate-enter-active, 
.rotate-leave-active { 
transform-origin: left; 
transition: transform 1s linear; 
} 


</style> 
<div id="app"> 
<button @click="isHidden = !isHidden"> 
{{ isHidden ? ' 显 示 ' : ' 隐 藏 ，}} 
</button> 
<!-- 默认 前 级 的 过 渡 --> 
<transition> 
<p Vv-if="!isHidden"> 使 用 默认 前 缀 的 过 渡 </p> 
</transition> 


<!-- 自 定义 前 缀 的 过 渡 ，transitionName 为 变量 --> 
<transition :name="transtionName"> 
<p v-if="l!isHidden"> 使 用 rotate 前 缀 的 过 渡 </p> 
</transition> 
</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
// 声明 Vue 实例 
let vm = new Vuel({ 
el: '#app', 
data () { 
return { 
isHidden: true, 


transtionName: 'rotate' // 如 果 在 运行 时 ， 将 transitionName 改 为 v 会 怎样 ? 
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} 
}) 
</script> 


在 这 段 代码 中 ， 笔 者 定义 了 两 种 过 渡 效 果 ( 渐 入 / 渐 出 、 旋 转 显 示 / 旋转 隐藏 ，， 并 
用 到 了 默认 前 级 的 类 名 和 自 定义 前 缀 的 类 名 。 
笔者 绘制 了 一 张 默 认 前 级 的 过 渡 示 意图 ( 见 图 5.7) ， 通 过 这 张 图 ， 同 学 们 可 以 来 体 
会 一 下 过 渡 执 行 的 各 种 阶段 和 作用 。 
进入 离开 
不 透明 度 : 0 一 -- 一 > 不 透明 度 : 0 


| 
[一 V-enter ne —V-leave Vlboventss 


-BE 


图 5.7 渐 入 / 渐 出 过 渡 


由 于 动态 效果 无 法 演示 ， 因 此 笔者 截取 了 过 渡 执 行 中 的 一 帧 ， 如 图 5.8 所 示 。 


全 name 帅 t 河 证 烘 纲 前 
5.8 进出 过 渡 时 ( transition ) 


除了 transition 之 外 ， 我 们 还 可 以 使 用 CSS 中 的 animation， 或 者 直接 使 用 第 三 方 动 
画 库 〈 如 Animate.css) 来 实现 过 渡 动 画 。 

Animate.css 是 一 款 酷 炫 丰 富 的 跨 浏览 器 动画 库 , 它 在 GitHub 上 的 star 数 至 今 已 有 5.2 
万 (详细 内 容 可 以 在 GitHub 上 查看 ) 。 借 助 于 Animate.css， 我 们 可 以 用 十 分 简短 的 代 
码 来 实现 一 个 酷 炫 的 动画 效果 ， 如 : 


<!-- 引入 动画 库 --> 
<link 
rel="astylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate. 
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min.css"> 

<!-- animated 标 识 要 执行 动画 的 元 素 ，bounce 标 识 所 要 执行 的 动画 效果 ， 此 处 为 弹簧 效 果 
——> 

<hl class="animated bounce">Example</hl> 


由 于 这 些 动 画 库 有 着 不 同 的 类 名 规则 ， 无 法 与 Vue 默认 的 类 名 规则 配合 使 用 ， 因 此 
Vue 为 其 提供 了 兼容 方案 ， 人 允许 用 户 自 定义 过 渡 的 类 名 ， 这 些 类 名 的 优先 级 将 高 于 默认 
的 类 名 。 

我 们 可 以 使 用 以 下 特性 来 自 定义 过 渡 类 名 : 
enter-class 
enter-active-class 
enter-to-class 
leave-class 


leave-active-class 


leave-to-class 


下 面 来 看 一 段 示例 代码 : 


<!-- 引入 Animate .css 动 画 库 --> 
<link 
rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate. 
mimess"> 
<!-- 引入 vue --> 
<script src="https://cdn.jsdelivr.net/npm/vuee2.5.16/dist/vue.min. 
js"></script> 
<style> 
.inline-block { 
display: inline-block; 
} 
.rotate-enter-active { 
animation: selfRotateIn 1s; 
} 
.rotate-leave-active { 
animation: selfRotateOut 1s7 


上 
/* 命名 避免 与 Animate.css 冲 突 */ 
Qkeyframes selfRotatelIn { 
0% { 
opacity: 0; 
transform: rotateZz(-180deg); 
} 
100% { 
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opacity: 17 
transform: rotatez (0deg); 
} 
} 
Qkeyframes selfRotateOut { 
0% { 
opacity: 1; 
transform: rotatez (0deg); 
} 
100% { 
opacity: 0; 
transform: rotatez (180deg); 
} 
} 


</style> 
<div id="app"> 
<button @click="isHidden = !isHidden"> 
{{ isHidden ? ' 显 示 ' : ' 隐 藏 ，}} 
</button> 


<!-- 自 定义 的 动画 --> 
<transition name="rotate"> 
<span class="inline-block" v-if="!isHidden"> 自 定义 的 动画 </span> 
</transition> 
<!-- animate.css 的 动画 --> 
<transition 
name="custom" 
enter-active-class="animated rotateIn" 
leave-active-class="animated rotateOout"> 
<span class="inline-block" v-if="!isHidden">animate.css 动 画 </span> 
</transition> 
</div> 
<script type="text/javascript"> 
// 声明 Vue 实例 
let vm = new Vuel({ 
el: '#app', 
data () { 
return { 
isHidden: true 


4 
} 
}) 
</script> 


在 这 段 代 码 中 ， 笔 者 分 别 使 用 自 定义 动画 和 Animate.css 动画 库 定 义 了 过 渡 效 果 ， 进 
入 /离开 过 渡 的 帧 片段 分 别 如 图 5.9、 图 5.10 所 示 。 
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图 5.9 进入 过 渡 时 ( 自 定义 动画 与 Animate.css ) 


图 5.10 ”离开 过 渡 时 ( 自 定义 动画 与 Animate.css ) 


在 自 定 义 动画 时 ， 笔 者 试图 模拟 Animate.css 的 rotateIn 和 rotateOut， 不 过 由 于 动画 
模式 设置 不 够 准确 ， 两 者 的 运行 结果 也 略 有 些 差别 。 

在 开发 中 ， 使 用 进入 过 渡 便 可 实现 初始 泻 染 时 的 过 渡 效 果 。 除 此 之 外 ，Vue 提供 了 
专门 的 初始 泻 染 过 渡 ， 这 需要 在 transition 元 素 上 添加 appear 属性 ， 不 过 appear 过 渡 只 支 
持 自 定义 类 名 的 过 渡 和 JS 过 渡 ， 用 法 如 下 : 


<transition 
appear 
appear-class="custom-appear-class" 
appear-to-class="custom-appear-to-class" 
appear-active-class="custom-appear-active-class" 
> 
l= we < 
</transition> 


还 记得 Vue 的 元 素 复 用 策略 吗 ? Vue 为 了 高 效 地 更 新 元 素 ， 会 采用 “就 近 复 用 ”的 
策略 。 因 此 当 我 们 需要 隐藏 / 显示 多 个 相 邻 的 相同 标签 的 元 素 时 ， 并 不 一 定 所 有 的 元 素 
都 会 执行 过 渡 ， 因 为 部 分 元 素 可 能 被 复 用 了 《被 复 用 的 元 素 不 会 进入 /离开 ) 。 为 了 解 
决 这 个 问题 ， 我 们 需要 赋予 元 素 唯一 key 值 ， 让 Vue 对 元 素 进行 跟踪 。 

反之 ， 当 元 素 的 key 值 发 生变 化 时 ，Vue 不 会 复 用 原 有 的 元 素 ， 而 将 重建 新 的 元 素 。 
根据 这 一 特点 , 我 们 可 以 通过 改变 元 素 的 key 值 来 触发 过 渡 动 画 , 这 常 被 用 在 元 素 切 换 时 ， 
示例 代码 如 下 : 
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<style> 
.Vv-enter, .v-leave-to { 
opacity: 0; 
} 
.Vv-enter-active, .v-leave-active { 
transition: opacity 1s; 
} 
</style> 
<div id="app"> 
<button @click="isMaster = !isMaster"> 切 换 身 份 </button> 


<transition> 

<!-- 此 处 只 写 了 一 个 p 标 签 --> 

<p :key="isMaster ? 'master' : 'other'">{{ isMaster ? ' 大 家 好 ! ' : ' 东 
家 好 ! ' }}</p> 

</transition> 
</div> 


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
// 声明 Vue 实例 
let vm = new Vuel({ 
el: '#app', 
data () { 
return { 
isMaster: true 
ft 
E 
}) 
</script> 


页 面 初始 只 有 一 个 button 和 一 个 p 标签 ， 当 点 击 “ 切 换 身份 ”按钮 时 ， 过 渡 中 的 一 
帧 如 图 5.11 所 示 。 


东 率 好 ! 
图 5.11 通过 改变 元 素 key 值 触发 进出 过 渡 


奇怪 ， 代 码 中 明明 只 有 一 个 p 标签 ， 可 为 什么 页 面 上 会 有 渐 出 和 渐 入 的 两 个 元 素 呢 ? 
由 于 在 元 素 切换 时 , 旧 的 元 素 要 被 隐藏 , 新 的 元 素 ( 由 于 key 值 改变 , 该 元 素 是 新 建 的 ) 
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要 被 显示 ， 两 者 过 渡 都 需要 一 定 的 时 间 ， 且 Vue 默认 进入 和 离开 同时 发 生 ， 因 此 会 出 现 
两 个 元 素 同时 存在 的 问题 。 
为 了 解决 这 一 问题 ，Vue 提供 了 过 渡 模 式 : 
@ in-out: 新 元 素 先 出 现 ， 之 后 旧 元 素 隐藏 
@ out-in: 旧 元 素 先 隐藏 ， 之 后 新 元 素 出 现 
用 法 如 下 : 
<transition mode="out-in"> 


<!-- 元 素 --> 
</transition> 


笔者 将 上 述 示例 中 的 代码 稍微 修改 了 一 下 ， 为 transition 元 素 加 上 过 渡 模 式 ， 改 造 后 
的 代码 如 下 : 


<transition mode="out-in"> 
<p :key="isMaster ? 'master' : 'other'">{{ isMaster ? ' 大 家 好 ! ' : ' 东 
家 好 ! ' }}</p> 


</transition> 


此 时 再 点 击 “ 切 换 身份 ”按钮 ， 元 素 离开 过 渡 的 帧 片段 如 图 5.12 所 示 。 


| 切换 身份 


5.12 ”离开 过 渡 时 ( 过 渡 模式 ) 


元 素 进入 过 渡 的 帧 片段 如 图 5.13 所 示 。 


5.13 ”进入 过 渡 时 ( 过 渡 模式 ) 
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可 以 看 到 ， 在 使 用 out-in 过 渡 模式 时 ， 离 开 过 渡 完 成 后 ， 进 入 过 渡 才 开始 执行 。 
同样 ， 我 们 也 可 以 在 动态 切换 组 件 时 使 用 过 渡 模 式 以 实现 平滑 的 过 渡 效 果 。 
最 后 ， 关 于 JS 过 渡 ， 笔 者 就 不 多 描述 了 ， 同 学 们 大 致 了 解 一 下 其 用 法 即 可 : 


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
"yeript> 
<div id="app"> 


<button @click="isHidden = !isHidden"> 
{{ isHidden ? ' 显 示 ' : ' 隐 藏 ，}} 

</button> 

<transition 


:before-enter="handleBeforeEnter" 
:enter="handleEnter" 
:after-enter="handleAfterEnter" 
:enter-cancelled="handleEnterCancelled" 
:before-leave="handleBeforeLeave" 
:leave="handleLeave" 
:after-leave="handleAfterLeave" 
:leave-cancelled="handleLeaveCancelled"> 
<!-- 过 渡 元 素 --> 
</transition> 
</div> 
<script type="text/javascript"> 
// 声明 Vue 实例 
let vm = new Vuel({ 
Sls "Fapp™s 
data () { 
return { 
isHidden: true 
} 
}, 
methods: { 
// Vue 提供 了 以 下 钩子 函数 ， 这 些 钩 子 函数 也 可 以 结合 cSS 过 渡 和 动画 使 用 
handleBeforeEnter (el) {}, 
handleEnter (el, done) { 
// 当 只 用 JS 过 渡 时 ， 在 enter 和 leave 中 必须 使 用 done 进 行 回调 
// 否则 它们 将 被 同步 调用 ， 过 渡 会 立即 完成 
done () 
} 
handleAfterEnter (el) {}, 
handleEnterCancelled (el) {}, 
handleBeforeLeave (el) {}, 
handleLeave (el, done) {}, 
handleAfterLeave (el) {}, 
handleLeaveCancelled (el) {} 
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时 
</script> 


使 用 JS 实现 过 渡 效 果 并 不 常见 ， 感 兴趣 的 同学 可 以 做 一 些小 测试 


一 玩 。 


Sl 


5.2.2 多 节点 的 过 渡 


关于 单个 节点 的 过 渡 已 在 上 一 小 节 中 讲述 。 那 如 何 为 列表 元 素 添加 过 渡 效 果 呢 ? 比 
如 使 用 v-for 列表 泻 染 的 元 素 ? 

在 这 里 , transition 组 件 并 不 可 用 , Vue 提供 了 transition-group 组 件 用 以 实现 列表 过 渡 ， 
不 同 于 transition 的 是 : 

@ transition-group 将 以 真实 元 素 呈 现 ， 默 认为 span， 也 可 以 通过 tag 属性 更 换 为 其 

他 元 素 

@ 过 渡 模 式 不 可 用 

@ 内 部 元 素 必 须 提 供 唯一 的 key 属性 ( 就 近 复 用 会 导致 部 分 过 渡 失 效 ) 

下 面 来 看 一 段 示 例 代 码 : 


<style> 
.list-enter, .list-leave-to { 
opacity: 0; 
transform: translateY (30px); 
} 
.list-enter-active, 
.list-leave-active { 
transition: all 1s linear; 
} 
</style> 
<div id="app"> 
<button @click="addNewItem() "> 添加 元 素 </button> 
<br> 
<transition-group name="]list" tag="ul"> 
< 
Vv-for="item in list" 
:key="item"> 


{{ item }} 
A/lis 
</transition-group> 
</div> 


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js/acript> 
<script type="text/javascript"> 

// 声明 Vue 实例 
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let vm = new Vuel({ 
Sl: “#app'", 
data () { 
return { 
i 和， 名 
} 
] 
methods: { 
addNewItem () { 
this.list.push (this.1ist.1length) 
} 
} 
}) 
</script> 


在 这 段 代 码 中 ， 笔 者 定义 了 从 0 到 3 的 数组 ， 并 允许 用 户 通 过 点 击 “ 添 加 元 素 ” 按 
钮 来 创建 新 的 元 素 。 当 按钮 被 点 击 时 ， 动 画 片段 如 图 5.14 所 示 。 


WN PO 


图 5.14 元 素 进入 时 的 列表 过 渡 


从 图 5.14 中 可 以 看 到 ， 新 的 元 素 正 以 进入 过 渡 动 画 的 方式 显示 。 
除了 用 以 实现 进出 动画 之 外 ，transition-group 还 可 以 用 于 改变 元 素 定位 的 动画 ， 这 
需要 用 到 v-move 特性 。v-move 动画 效果 的 定义 方式 与 v-enter、v-leave 等 一 致 ， 它 可 以 
帮助 我 们 平滑 地 移动 列表 元 素 的 位 置 。 我 们 通过 示例 来 体会 一 下 ， 示 例 代码 如 下 : 
<style> 
.1ist-move { /* 定义 过 渡 效 果 */ 
transition: transform 1s; 
</style> 
<div id="app"> 
<button @click="orderByRandom() "> 随机 顺序 </button> 


<br> 
<transition-group name="list" tag="ul"> 
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<1i 
Vv-for="item in list" 
:key="item"> 


{{ item }} 
ls 
</transition-group> 


</div> 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min. 
js"></script> 
<script type="text/javascript"> 
// 声明 Vue 实例 
let vm = new Vuel({ 
els "#app", 
data () { 
return 1{ 
Lists [Oi 工区 3 殴 
} 
}, 


methods: { 
orderByRandom () { // 随机 改变 数组 元 素 的 位 置 
let tmp = [] // 初始 化 新 数组 


for (let i = 0; i < this.list.length; i++) { 
let num = Math.floor (Math.random() * (this.list.length - 0.001)) 
// 随机 新 元 素 
// 当 元 素 不 在 数组 中 时 ， 将 其 加 入 到 数组 中 
let index = tmp.indexof (num) 
while (index !== -1) { 
num = Math.floor(Math.random() * (this.list.length — 


0.001)) 
index = tmp.indexOf (num) 
} 
tmp.push (num) 
} 
this.list = tmp // 更 改 1ist 为 新 的 数组 
} 
} 
}) 
</script> 


在 这 段 代码 中 ,笔者 声明 了 从 1 到 4 的 数组 , 并 定义 了 将 其 重新 排序 的 方法 , 当 点 击 “ 重 
新 排序 ”按钮 时 ， 动 画 片段 如 图 5.15 所 示 。 

片段 的 演示 效果 并 不 是 很 好 , 不 过 同学 们 可 以 把 代码 抄 下 来 运行 一 下 ,以 加 深 理 解 。 

通过 transition-group 组 件 ， 我 们 可 以 为 列表 的 任意 变动 添加 动画 效果 ， 从 而 使 我 们 
的 项 目 更 加 酷 炫 。 
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5.15 ”移动 元 素 位 置 时 的 列表 过 渡 


到 这 里 ，Vue 相关 的 基础 知识 就 差不多 讲 完了 。 在 下 一 章 中 ， 笔 者 将 介绍 有 关 Vue 
项 目 化 的 内 容 , 希望 同学 们 能 够 好 好 消化 前 面 章节 中 的 知识 要 点 , 毕竟 只 有 基础 打 得 牢靠 ， 
在 实战 中 才 会 得 心 应 手 。 


第 6 章 Vue 项 目 化 


从 本 章 开始 ， 笔 者 将 介绍 一 些 使 用 Vue 生态 中 其 他 成 员 进 行 项 目 开发 的 内 容 。 
这 些 内 容 是 整个 Vue 生态 中 十 分 主流 且 核 心 的 部 分 ， 不仅 需要 同学 们 能 够 看 懂 ， 还 
需要 同学 们 在 实战 中 能 够 得 心 应 手 地 应 用 。 当 然 ， 要 想 做 到 这 些 ， 需 要 同学 们 跟着 教 
程 进行 操作 和 练习 。 


6.1 快速 构建 项 目 


当下 潮流 的 做 法 一 般 采 用 前 后 端 分 离 的 方式 进行 Web 架构 ， 但 同时 也 对 前 端 开发 环 
境 的 搭建 提出 了 更 高 的 要 求 。 一 个 完整 的 前 端 开发 环境 应 该 具备 预 编 译 模 板 、 注 入 依赖 、 
合并 压缩 资源 、 分 离开 发 和 生产 环境 及 提供 一 个 模拟 的 服务 端 环 境 等 功能 。 

对 于 初学 者 来 说 ， 能 够 理解 这 些 概念 的 定义 和 应 用 已 经 十 分 不 易 ， 好 在 Vue 为 我 们 
提供 了 项 目的 快速 构建 工具 一 一 Vue CLI。 


6.1.1 Vue CLI 简 介 


想起 以 前 和 朋友 杂谈 技术 时 ， 一 个 做 Ruby 的 朋友 说 : “Ruby on Rails 是 一 个 非常 
强大 的 Scaffolding (脚手架 ) ， 用 它 一 个 小 时 就 可 以 写 个 博客 网 站 。” 笔 者 心中 暗自 一 
惊 ， 回 去 查 了 下 这 个 “Scaffolding” 单 词 ， 译 为 “脚手架 ”， 但 久久 不 能 理解 是 什么 意 
思 ， 也 不 知 “Ruby on Rails” 到 底 是 何方 神圣 。 之 后 ， 偶 然 有 次 机 会 去 学 习 一 个 “Ruby 
onRails” 的 项 目 源 码 ， 才 明白 其 意思 。 

Vue CLI 也 是 一 个 “脚手架 ”， 使 用 它 ，5 分 钟 就 可 以 搭建 一 个 完整 的 Vue 应 用 。 
Vue CLI 是 Vue 官方 提供 的 构建 工具 ， 可 用 于 快速 搭建 一 个 带 有 热 重 载 ( 在 代码 修改 后 
不 必 刷 新 页 面 即 可 呈现 修改 后 的 效果 ) 、lint 代码 语法 检测 及 构建 生产 版 本 等 功能 的 单 页 
面 应 用 。 

上 面 的 内 容 牵 扯 到 很 多 概念 ， 初 次 接触 的 同学 也 不 必 担 心 ， 没 有 必要 对 其 刨 根 究 底 : 
一 是 它们 往往 只 是 作为 一 个 名 词 ， 用 于 沟通 而 已 ， 我 们 只 需要 理解 其 作用 和 用 法 ; 二 是 
它们 往往 太 过 抽象 ， 需 要 结合 实例 进行 理解 。 

下 面 笔者 将 演示 如 何 使 用 Vue CLI 快速 构建 一 个 Vue 项 目 。 
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6.1.2 ”使 用 Vue CLI 构 建 项 目 


1. 打开 控制 台 ， 输 入 : 


cnpm install vue-cli -9 


安装 Vue CLI， 尚 未 安装 cnpm 的 同学 可 以 输入 : 
npm install cnpm -g --registry=https://registry.npm.taobao.org 


用 来 安装 国内 淘宝 镜像 源 的 cnpm。 
在 命令 执行 结束 之 后 ， 输 入 : 


vue --version 

如 果 控 制 台 打印 出 版 本 号 ， 即 表示 安装 成 功 。 

2. 在 项 目 所 要 放置 的 文件 目录 下 打开 控制 人 台 ， 输 入 : 
vue init webpack my-project 


初始 化 项 目 〈 此 处 的 my-project 为 项 目 名 称 ) 。 
3. 在 模板 下 载 完 成 后 , Vue CLI 将 引导 我 们 进行 项 目 配置 , 笔者 的 配置 如 图 6.1 所 示 。 


F:\Ywue init webpack ny-project 


Project nane ny-project 
Project description A Vue.js project 
Author lonelydawn <lonelydaunBsina.con> 
Vue build CUse arrow keys》 
Vue build standalone 
Install vue-router? Yes 
Use ESLint to lint your code? Yes 
? Pick an ESLint preset Standard 
Set up unit tests No 
Setup e2e tests with Nightvatch? No 
3 Should ve run ‘npn install' for you after the project has been created? 《recom 


mended》 no 
vue-cli - Generated "ny-project". 


finished! 


To get start 
cd ny-project 
npn install Cor if using yarn: yarn》 
npn run lint 一 —fix 《or for yarn: yarn run lint —fix) 
npm run dev 


Docunentation can be found at https://vuejs-tenplates.github.io/webpack 
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其 中 ，“Set up unit tests” 和 “Setup e2e tests with Nightwatch” 选 择 “no”， 这 部 分 
内 容 与 Vue 没有 直接 关系 ， 这 里 不 予 探 讨 。 最 后 一 项 也 选择 “no” 是 因为 npm 的 镜像 源 
在 国外 ， 安 装 依赖 的 速度 缓慢 且 容易 出 错 ， 笔 者 建议 使 用 cnpm 安装 依赖 。 

4. 输入 : 

cnpm install 

安装 项 目 依赖 。 

5. 输入 : 

npm start 


构建 项 目的 开发 版 本 ， 并 启动 webpack-dev-server。 
此 时 ， 在 浏览 器 地 址 栏 输入 http: //localhost 8080 即 可 访问 项 目 ， 项 目 页 面 如 图 6.2 


Welcome to Your Vue.js App 
Essential Links 


Ecosystem 
图 6.2 Vue CLI 项 目 初 始 页 面 


6. 之 后 ， 另 开 一 个 控制 台 ， 输 入 : 
npm run build 


构建 项 目的 生产 版 本 。 


6.1.3 项 目 目录 介绍 
打开 初始 化 后 的 项 目 目录 , 可 以 发 现 里 面 已 经 存在 一 些 文件 和 文件 夹 , 如 图 6.3 所 示 。 
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babelrc 

editorconfig 

eslintignore 
国 .esintrcjs 
gitignore 
国 .postcssrcjs 
@ indexhtml 
回 packagejson 
DREADME.md 


图 6.3 Vue CLI 项 目 初始 目录 


目录 主要 内 容 的 介绍 如 表 6.1 所 示 。 


表 6.1 Vue CLI 项 目 初始 目录 
陆 


static 静态 资源 (如 使 用 JS 赋值 图 片 的 src 时 ， 该 图 片 资 源 应 放 在 static 下 ) 
babelrc babel 的 配置 文件 (babel， 下 一 代 JS 的 预 编译 器 ) 


.eslintignore ESLint 代码 语法 检测 的 配置 文件 (应 忽略 的 语法 格式 》 
.eslintre.js ESLint 代码 语法 检测 的 配置 文件 (应 规范 的 语法 格式 ) 
.gitignore 应 被 Git 版 本 控制 工具 忽略 的 文件 
index.html 应 被 webpack 注入 资源 的 模板 HTML 文件 
之 后 使 用 编辑 器 (笔者 使 用 的 是 WebStorm) 打开 项 目 ， 查 看 src 文件 夹 下 的 内 容 ， 


目录 如 图 6.4 所 示 。 


v Massets 
辐 logo png 
v Mcomponents 
总 HelloWorld.vue 
router 
总 indexjs 
十 Appvue 


访 mainjs 


6.4 ”src 文件 夹 下 的 内 容 
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其 中 ，assets 文件 夹 用 于 存放 图 片 、 音 频 、 视 频 等 资源 ;components 文件 夹 用 于 
存放 我 们 开发 的 单 文件 组 件 ; routerindex.js 用 于 配置 项 目的 前 端 路 由 (用 到 了 Vue 
Router) ; App.vue 是 Vue CLI 为 我 们 默认 创建 的 项 目的 根 组 件 ，mainjs 则 是 webpack 的 
入 口 文件 。 

下 面 ， 我 们 先 来 看 一 下 App.vue、mainjs 中 的 内 容 。 

App.vue 中 的 代码 如 下 : 


<template> 
<div id="app"> 
<img src="./assets/1ogo.png"> 
<!-- Vue Router 的 路 由 视图 区 --> 
<router-view/> 
</div> 
</template> 


<script> 

export default { 
name: 'App' 

i 

</script> 


<style> 

#app { 
font-family: 'Avenir', Helvetica, Arial, sans-serif; 
-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale; 
text-align: center; 
color: #2c3e50; 
margin-top: 60px; 

} 

</style> 


@ 这 是 一 个 单 文 件 组 件 ， 包 含 HTML、JS 和 CSS 三 个 部 分 。 显 然 ，Vue CLI 采 用 
关注 点 分 离 的 开发 方式 ， 这 种 开发 方式 使 得 组 件 的 内 聚 性 更 强 ， 也 更 适合 于 组 件 
化 的 开发 。 

@ script 标签 中 的 内 容 为 Vue 组 件 ; template 标签 中 的 内 容 为 组 件 的 DOM 结构 ; 
style 标签 中 的 内 容 为 CSS 样式 表 ( 在 被 赋予 scoped 属性 之 后 ， 样 式 表 的 作用 域 
仅 限 在 当前 组 件 中 ) 。 

@ export 和 import 是 ECMAScript 6 语法 中 用 于 模块 化 管理 的 两 个 关键 字 ， 这 里 使 
用 export 导出 Vue 组 件 以 供 外 部 调用 。 
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mainjjs 中 的 代码 如 下 : 


// The Vue build version to load with the `jimport” command 

// (runtime-only or standalone) has been set in webpack.base.conf 
with an alias. 

import Vue from ‘'vue' 

import App from './App' 

import router from './router' 


Vue.config.productionTip = false 


/* eslint-disable no-new */ 
new Vue ({ 
el: '#app', 
router, 
components: { App }, 
template: '<App/>"' 
} 


@ 这 里 使 用 import 引入 全 局 的 Vue 对 象 、App 组 件 和 Vue Router 的 配置 。 之后， 
创建 了 一 个 Vue 实例 ， 并 将 App 组 件 和 router 注册 到 实例 中 。 
@ 注释 /*eslint-disable no-new*/ 用 于 告诉 eslint 忽略 此 处 对 new 关键 字 的 检测 。 
在 mainjs 中 ， 实 例 的 el 选项 绑 定 了 id 为 app 的 DOM 元 素 。 可 这 个 元 素 在 哪里 呢 ? 
似乎 App 组 件 中 有 个 id 为 app 的 div 元 素 ， 是 这 个 吗 ? 
下 面 来 看 一 下 根 目录 (my-project) 下 index.html 中 的 代码 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width,initial-scale=1.0"> 
<title>my-project</title> 
</head> 
<body> 
<div id="app"></div> 
<!-- built files will be auto injected --> 
</body> 
</html> 


由 于 App 组 件 是 被 注册 在 实例 中 的 (作为 实例 的 子 组 件 ) ， 那 么 App 组 件 中 的 元 素 
当然 不 可 能 作为 实例 的 挂 载 元 素 。 那 么 ， 实 例 最 终 是 被 挂 载 在 index.html 中 的 div 元 素 上 
吗 ? 其 实 也 不 是 。 

Vue CLI 会 将 所 有 编译 整理 好 的 资源 路 径 注 入 到 以 index.html 为 模板 的 镜像 中 ， 被 注 
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入 后 的 镜像 即 生产 版 本 中 项 目的 入 口 文件 ， 也 就 是 dist 文件 目录 下 的 index.html， 这 里 的 
元 素 才 是 实例 最 终 被 挂 载 的 地 方 。 

在 src 文件 目录 下 ， 还 有 一 个 重要 的 文件 一 一 使 用 Vue Router 配置 的 router/index.js。 
有 关 Vue Router 的 内 容 ， 笔 者 将 放 到 下 一 小 节 中 进行 讲述 。 


6.2 前 端 路 由 


路 由 这 个 概念 首先 出 现在 后 台 。 传 统 MVC 架构 的 web 开发 ， 由 后 台 设 置 路 由 规则 ， 
当 用 户 发 送 请 求 时 , 后 台 根 据 设 定 的 路 由 规则 将 数据 泻 染 到 模板 中 , 并 将 模板 返回 给 用 户 。 
因此 ， 用 户 每 进行 一 次 请 求 就 要 刷新 一 次 页 面 ， 十 分 影响 交互 体验 。 

AJAX 的 出 现 则 有 效 解决 了 这 一 问题 。AJAX (Asynchronous Javascript And Xml) ， 
浏览 器 提供 的 一 种 技术 方案 ， 采 用 异步 加 载 数据 的 方式 以 实现 页 面 局 部 刷新 ， 极 大 提升 
了 用 户 体验 。 

而 异步 交互 体验 的 更 高 版 本 就 是 SPA 一 一 单 页 面 应 用 ， 不 仅 页 面 交互 无 刷新 ， 甚 至 
页 面 跳 转 也 可 以 无 刷新 ， 前 端 路 由 随 之 应 运 而 生 。 


6.2.1 前 端 路 由 的 简单 实现 


广义 上 的 前 端 路 由 是 指 前 端 根据 URL 来 分 发 视图 ， 现 有 两 个 核心 操作 : 一 是 需要 监 
听 浏 览 器 地 址 的 变化 ， 二 是 需要 动态 加 载 视图 。 

笔者 分 别 使 用 Vue 和 原生 的 JS 来 模拟 实现 ， 并 用 Nodejs 创建 服务 端 文件 ， 服 务 端 
文件 appjs 的 代码 如 下 : 


const http = require('http') // http 模 块 

const fs = require('fs')  // 文件 处 理 模块 

const hostName = "127.0.0.1" 

const port = 3000 

const server = http.createServer (function (reqg, res) { // 创建 http 服 务 


let content = fs.readFilesync('index.html') // 读 取 文 件 
res.writeHead(200，{ // 设置 响应 内 容 类 型 
"content “type’: "text/html;charset="atf-8™" 


}) 
res.write (content) // 返回 jndex.html 文 件 内 容 
res.end() 
1) 
server.listen (port，hostName，function () { // 启动 服务 监听 
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console.log(“Server is running here: http://${hostName}:${port}.) 
¥ 


这 段 代码 用 到 了 Node 的 http 和 全 模块 ， 用 以 创建 一 个 可 以 返回 index.html 页 面 的 
服务 。 想 要 启动 服务 ， 首 先 要 到 Node 官网 下 载 安装 Node 客户 端 ( 推 荐 使 用 node 8.11.3 


长 期 稳定 版 ) ， 之 后 在 文件 所 处 目录 下 输入 命令 : 
node app.js // node + 文件 名 


当 控 制 台 显示 “Server is running here http: //127.0.0.1: 3000? 时 , 即 表示 服务 启动 成 功 。 
下 面 来 看 一 下 使 用 Vue 实现 前 端 路 由 的 代码 (index.html) : 


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></ 
script> 
<div id="app"> 
<ul> 
<li><router-link to="/">Home</router-link></1i> 
<li><router-link to="/about">About</router-link></1i> 
</ul> 
<router-view></router-view> 
</div> 
<script type="text/javascript"> 
let Home = { 
template: '<hl>This is Home!</hl>' 
} 
let About = { 
template: '<hl>This is About!</hl>"' 
} 
let routes = [ // 定义 路 由 规则 
{ 
pathbs 7 
component: Home 
}, 


path: '/about', 
component: About 
} 
] 
let RouterLink = { 
DSS 
template: '<a :href="to"><slot name="default"></slot></a>' 
} 
let RouterView = { 
data () { 
return f{ 
url: window.location.pathname // 获取 浏览 器 地 址 
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} 
}, 


computed: { 
ViewComponent () { // 根据 浏览 器 地 址 返回 相应 组 件 
return routes -find (route => route.path === this.url) .component 
} 
}, 
render (h) { 


return hl(this.ViewComponent) 

¥ 
} 
/* eslint-disable */ 
let vm = new Vuel({ 

el: "#app"s; 

components: { RouterLink, RouterView } 
}) 

</script> 


在 这 段 代码 中 ， 笔 者 声明 了 Home、About、RouterLink 和 RouterView 四 个 组 件 。 
Home 和 About 为 待 分 发 的 视图 组 件 ，RouterLink 为 触发 视图 切换 的 组 件 ，RouterView 为 
挂 载 动态 视图 的 组 件 。 之 后 ， 笔 者 在 vm 实例 中 通过 监测 window.location.pathname 的 变 


化 来 动态 分 发 视图 。 
这 种 方式 虽然 实现 了 前 端 路 由 ， 但 其 实 视图 切换 还 是 由 页 面 刷新 来 执行 ， 这 并 不 是 


一 个 单 页 面 应 用 。 
使 用 原生 JS 实现 前 端 路 由 的 代码 如 下 (index.html》: 


<div> 
<ul> 
<1i><a href="#/">Home</a></1i> 
<1i><a href="#/about">About</a></1i> 
</ul> 
<!-- 动态 视图 被 挂 载 的 元 素 --> 
<div id="view"></div> 
</div> 
<script type="text/javascript"> 
let Home = '<hl>This is Home!</hl>' // 视图 模板 Home 
let About = '<hl>This is About!</hl>' // 视图 模板 About 
let Router function (el) { // 定义 路 由 类 
let view document .getElementById (el) 
let routes = [] // 路 由 规则 列表 
let load = function (route) { // 加 载 视 图 
route && (view.innerHTML = route.template) 


} 
let redirect = function () { // 分 发 视图 
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Let url = Windod. location bash. sliea(l) 站 7 
for (let route of routes) { 
url === route.url && load (route) 


a 

} 

this.push = function (route) { // 添加 路 由 规则 
routes .push (route) 


F 
window.addEventListener('load'，redirect，false) // 页 面 加 载 时 


window.addEventListener ('hashchange'，redirect，false) // URL 变 化 时 


} 
let router = new Router('view') // 实例 化 路 由 


router.push({ // 添加 路 由 规则 
和 
template: Home 
}) 
router.push({ 
url: '/about", 
template: About 


}) 
/seript> 


在 这 段 代 码 中 ， 笔 者 为 浏览 器 的 内 置 对 象 window 在 页 面 加载 和 URL 变化 时 添加 了 
监听 器 , 用 来 以 分 发 视图 。 细心 的 同学 可 以 发 现 , 笔者 在 a 标签 的 href 中 写 入 了 “#” 符 号 ， 
这 个 符号 可 以 阻止 页 面 刷新 (实现 了 单 页 面 应 用 〉 ， 但 也 会 在 URL 中 加 入 该 符号 ， 因 此 
笔者 在 redirect 函数 中 并 没有 直接 取 window.location.hash 的 值 ， 而 是 先 用 slice (1) 将 “#” 


去 掉 。 
两 种 实现 方法 的 运行 结果 的 初始 页 面 均 如 图 6.5 所 示 。 


This is Home! 
图 6.5 前 端 路 由 的 简单 实现 (1 ) 
当 点 击 About 链接 时 ， 页 面 如 图 6.6 所 示 。 


se Home 
。 About 


This is About! 


图 6.6 前 端 路 由 的 简单 实现 (2 ) 
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虽然 两 种 实现 的 视图 表现 看 似 相同 ， 但 其 实 结 果 却 大 相 径 庭 ， 同 学 们 可 以 结合 实例 


体会 一 下 。 


6.2.2 ”Vue 中 的 前 端 路 由 


Vue Router 是 Vuejs 官方 提供 的 路 由 管理 器 ， 它 与 Vuejjs 的 核心 深度 集成 ， 且 随 着 


Vuejs 版 本 的 更 新 而 更 新 ， 致 力 于 简化 单 页 面 应 用 的 构建 。 


Vue Router 的 功能 十 分 强大 ， 笔 者 无 意 枚 举 一 些 抽象 的 概念 ， 下 面 笔者 将 通过 几 个 


简单 的 示例 〈 需 要 运行 在 服务 端 上 ) 来 演示 一 下 它 的 用 法 。 
1. 基础 路 由 


<script src="https://unpkg.com/vue/dist/vue.js"></script> 


<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 


<div id="app"> 
<ul> 
<li><router-link to="/">Home</router-link></1i> 
<li><router-link to="/about">About</router-link></1i> 
</ul> 
<router-view></router-view> 
</div> 
<script type="text/javascript"> 
let Home = { template: '<hl>This is Home!</hl>' } // Home 组 件 


let About = { template: '<hl>This is About!</hl>' } // About 组 件 


let routes = [ // 定义 路 由 规则 ， 每 一 个 路 由 规则 应 该 映射 一 个 视图 组 件 
path: '/', component: Home }, 
path: '/about', component: About } 


] 


let router = new VueRouter({ // 创建 Vue Router 实 例 ， 并 传 入 routes 配 置 


routes 
} 
let app = new Vuel({ 
router 
}) .Smount ('#app') 
</script> 


RouterLink 和 RouterView 是 Vue Router 提供 的 两 个 内 置 组 件 。RouterLink 默认 会 被 


匹配 


泻 染 成 一 个 <a> 标签 ， 它 的 to 属性 用 于 指定 跳 转 链接 ; RouterView 将 负责 挂 载 路 
到 的 视图 组 件 。 
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2. 动态 路 由 


<script src="https://unpkg.com/vue/dist/vue.js"></script> 
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 
<div id="app"> 
<ul> 
<li><router-link to="/">Home</router-link></1i> 
<1i @click="add"> 
<!-- 2 .参数 num 由 实例 传 入 路 由 --> 
<router-link :to="'/about/' + num">About</router-link> 
</1i> 
</ul> 
<router-view></router-view> 
</div> 
<script type="text/javascript"> 
let Home = { template: '<hl>This is Home!</hl>' } // Home 组 件 
let About = { // About 组 件 
template: '<div>' + 
'<hl>This is About!</hl>' + 
"<p>num: {{ $route.params.num }}</p>' + // ”3. 在 组 件 中 显示 参数 num 
'</div>"' 
} 
let routes = [ // 定义 路 由 规则 ， 每 一 个 路 由 规则 应 该 映射 一 个 视图 组 件 
{ path: '/', component: Home }, 
{ path: '/about/:num'，component: About } // 1. 定义 了 参数 num， 格 式 如 : 
/:num 
] 
let router = new VueRouter({ // 创建 Vue Router 实 例 ， 并 传 入 routes 配 置 
routes 
La 
let app = new Vue({ 
data () { 
return { num: 0 } 
}, 
methods: { // 当 点 击 About 时 ，num 值 自 增 1 
add () { this.num++ } 
]， 
router 
}) .$mount ('#app') 
</script> 


我 们 可 以 使 用 动态 路 由 参数 将 匹配 某 种 模式 的 所 有 路 由 映射 到 同一 个 组 件 〈 致 敬 
RESTful) 。 比 如 ， 上 述 示例 中 ，Vue Router 将 所 有 匹配 /about/: num 的 路 径 全 都 映射 到 
About 组 件 中 〈 见 图 6.7) ， 并 将 num 作为 组 件 中 的 一 个 参数 。 
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图 6.7 动态 路 径路 由 


路 径 参数 应 用 英文 冒号 “: ”标记 , 但 是 在 使 用 时 应 注意 设计 的 规则 是 否 合理 ， 比 如 : 
routes: [ 


{ path: '/:any'，component: Home} // 可 以 匹配 路 径 为 /about 的 路 由 ，"about" 
将 作为 any 的 值 
] 


将 会 把 所 有 路 径 都 匹配 到 Home 组 件 中 。 
当 动 态 路 径 被 匹配 时 ， 我 们 可 以 在 组 件 中 使 用 this.$route .params 来 获取 参数 的 值 。 


3. 嵌 套 路 由 


<script src="https://unpkg.com/vue/dist/vue.js"></script> 
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 
<div id="app"> 
<ul> 
<li><router-link to="/">Home</router-link></1i> 
<1i> 
<div><router-link to="/about">About</router-link></div> 
<ul> 
<!-- 3. 使 用 柑 套 路 由 --> 
<li><router-link to="/about/author">About - Author</router-link></1i> 
<li><router-link to="/about/email">About - Email</router-link></1i> 
SU 
i 
</ul> 
<router-view></router-view> 
</div> 
<script type="text/javascript"> 
let Home = { template: '<hl>This is Home!</hl>' } // Home 组 件 
let About = { // About 组 件 
template: "<div>' + 
'<hl>This is About!</hl>' + 
'<router-view></router-view>' + // 1. 嵌 套 的 动态 视图 
'</div>" 
} 
let Author = { template: '<p>Author: lonelydawn</p>' } // Author 组 件 


内 
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let Email = { template: '<p>Email: lonelydawn@sina.com</p>' } // Email 
组 件 
let routes = [ // 定义 路 由 规则 ， 每 一 个 路 由 规则 应 该 映射 一 个 视图 组 件 
{ path: '/', component: Home }, 
{ 
path: '/about"', 
component: About, 
children: [ // 2. 嵌 套 子路 由 
{ path: "author', component: Author }, 
{ path: ‘'email', component: Email } 
] 
} 


] 

let router = new VueRouter({ // 创建 Vue Router 实 例 ， 并 传 入 routes 配 置 
routes 

}) 

let app = new Vuel({ 
router 

}) .Smount ('#app') 

</script> 


@ 庶 套 路 由 可 以 实现 在 动态 视图 中 嵌 套 动态 视图 。 

@ 这 里 有 个 问题 ， 多 层 的 动态 视图 是 否 可 以 使 用 Vue 的 内 置 组 件 component 来 实现 
呢 ? 当然 可 以 。 不 过 使 用 component 切换 的 视图 会 在 页 面 刷新 后 回 到 初始 状态 ， 
而 使 用 路 由 分 发 的 视图 在 页 面 刷新 后 会 保持 当前 路 径 对 应 的 视图 ， 并 在 浏览 器 的 
history 中 留 下 记录 。 


4. 编程 式 路 由 


<script src="https://unpkg.com/vue/dist/vue.js"></script> 
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></ 
script> 
<div id="app"> 
<ul> 
<!-- 默认 字符 串 为 路 径 参数 --> 
<1i @click="redirectByPath('/')">Home</1i> 
人 
<!-- 指定 参数 为 路 径 --> 
<div @click="redirectByPath('/about')">About</div> 
<ul> 
<!-- 嵌 套 路 由 --> 
<1i @click="redirectByPath('/about/author')">About - Author</l1i> 
<!-- 由 套 路 由 ， 动 态 路 由 ， 当 使 用 path 时 ，params 参 数 不 生 效 --> 
<li @click="redirectByPath('/about/email', { email: lonelydawn@ 
sina.com’' })">About - Email</Ii> 
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<!-- 嵌 套 路 由 ， 动 态 路 由 ， 可 以 直接 将 参数 写 入 path --> 
<l1i @click="redirectByPath('/about/email/lonelydawn@sina.com')">About 
— Email</1i> 
<!-- 嵌 套 路 由 ， 动 态 路 由 ， 使 用 命名 路 由 跳 转 视图 --> 
<1li @click="redirectByName('Email', { email: 'singledawn@sina. 
com' })">About - Email</1i> 
</ul> 
</1i> 
</ul> 
<router-view></router-view> 
</div> 
<script type="text/javascript"> 
let Home = { template: '<hl>This is Home!</hl>' } // Home 组 件 
let About = { // About 组 件 
template: '<div>' + 
"<hl>This is About!</hl>' + 
'<router-view></router-view>' + // 内 套 的 动态 视图 区 
'</div>' 
} 
let Author = { template: '<p>Author: lonelydawn</p>' } 
let Email = { template: '<p>Email: {{ $route.params.email }}</p>' } 
let routes = [ // 定义 路 由 规则 ， 每 一 个 路 由 规则 应 该 映射 一 个 视图 组 件 
{ path: '/', component: Home }, 
{ 


path: '/about', 
component: About, 
children: [ // 嵌 套 子路 由 
{ name: 'Author', path: 'author', component: Author }, 
{ name: 'Email', path: 'email/:email', component: Email } 


} 


] 
let router = new VueRouter({ // 创建 Vue Router 实 例 ， 并 传 入 routes 配 置 


routes 
}) 
let app = new Vuel({ 
methods: { 
redirectByPath (path, params) { 
this.$router.push({ path, params }) 
}, 
redirectByName (name, params) { 
this.s$router.push({ name, params }) 
» 
}, 
router 
}) .$mount ('#app') 
</script> 
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@ 这 里 并 没有 使 用 RouterLink 组 件 ， 而 是 在 JS 中 使 用 routerpush 方法 跳 转 视图 。 


@ 我 们 可 以 
name 跳 转 


通过 路 由 的 path 跳 转 视图 ， 还 可 以 赋予 路 由 name 属性 ， 然 后 通过 
视图 。 


@ 动态 参数 应 放 在 params 中 ， 当 使 用 path 时 ，params 参数 不 生效 ， 此 时 应 将 参数 
值 直接 写 进 path 中 。 
5. 使 用 Vue CLI 快速 构建 的 项 目 中 的 router/index.js 


import Vue 


from "Vue' 


import Router from 'vue-router' 
import HelloWorld from '@/components/HelloWorld'" 


Vue.use (Rou 


export defa 
routes: [ 
{ 
path: 
name: 
compo’ 
} 
] 
}) 


ter) 
ult new Router({ 
Ba 


'HelloWorld', 
nent: HelloWorld 


@ 这 里 使 用 Vue.use 安装 Vue Router 插件 。 

@ 这 里 使 用 export 返 回路 由 规则 。 默认 只 有 当 路 径 为 “/” 时 ， 泻 娄 HelloWorld 组 件 。 

关于 Vue Router 的 知识 点 有 很 多 ， 笔 者 在 这 里 并 没有 一 一 列举 ， 而 是 介绍 了 其 最 常 
见 的 几 种 用 法 。 实 际 上 ， 掌 握 这 些 已 经 能 在 实战 中 应 对 大 部 分 的 情况 。 想 要 深入 研究 的 
同学 可 以 查阅 官网 文档 ， 并 欢迎 随时 通过 邮件 与 笔者 进行 交流 。 


6.3 状态 管理 


对 于 小 型 应 用 来 说 ， 完 全 没有 必要 引入 状态 管理 ， 因 为 这 会 带 来 更 多 的 开发 成 本 。 
然而 当 应 用 的 复杂 度 逐 渐 提高 ， 状 态 管理 也 越发 重要 起 来 。 

对 于 组 件 化 开发 来 说 ， 大 型 应 用 的 状态 往往 跨越 多 个 组 件 。 在 多 层 嵌 套 的 父子 组 件 
之 间 传 递 状 态 已 经 十 分 麻烦 ， 而 Vue 更 是 没有 为 兄弟 组 件 提供 直接 共享 数据 的 办 法 。 基 
于 这 个 问题 ， 许 多 框架 提供 了 解决 方案 一 一 使 用 全 局 的 状态 管理 器 ， 将 所 有 分 散 的 共享 


数据 交 由 状态 管理 


器 保管 ，Vue 也 不 例外 。 
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Vue 官网 提供 的 状态 管理 器 名 为 Vuex， 本 节 将 介绍 有 关 Vuex 的 概念 与 用 法 。 


6.3.1 ”对象 引 用 


在 了 解 Vuex 之 前 ， 我 们 先 来 看 一 下 对 象 引用 的 概念 。 
下 面 这 两 段 代 码 将 输出 什么 ”“〈 先 不 要 看 答案 ， 自 己 思考 一 下 ) 


// 代码 1 
let state = { 
msg: "Welcome ' 
} 
let copy = state 
state.hello = "world" 
console.1og(Object.keys (copy)) // Object .keys 用 于 获取 对 象 的 键 名 
// 代码 2 
let state = { 
msg: "welcome" 
} 
Tet Copy = state 
state = { 
hello: “world" 
} 
console.1log (Object .keys (copy)) 


答案 如 下 : 
J/ [sg "elo"] 
/= [sg 


在 代码 1 中 ， 当 state 对 象 被 定义 时 ， 浏 览 器 会 为 其 分 配 一 个 地 址 ; 当 使 用 state 赋 
值 copy 对 象 时 ，copy 将 引用 state 的 地 址 。 因 此 ， 当 state 改变 时 ，copy 也 随 之 改变 。 

在 代码 2 中， 笔者 在 为 copy 引用 state 的 地 址 之 后 ， 重 新 定义 了 state 对 象 。 此 时 ， 
state 将 引用 一 个 新 的 地 址 ， 而 copy 仍 引用 原来 的 地 址 ， 所 以 copy 并 无 任何 变化 。 

理解 了 这 个 概念 ， 将 对 我 们 学 习 和 使 用 Vuex 大 有 神 益 。 


6.3.2 ”状态 管理 器 Vuex 


Vuex， 用 于 管理 分 散在 Vue 各 个 组 件 中 的 数据 。 

每 一 个 Vuex 应 用 的 核心 都 是 一 个 store (仓库 ) ， 你 也 可 以 理解 它 是 一 个 “非凡 的 
全 局 对 象 ”。 与 普通 的 全 局 对 象 不 同 的 是 ， 基 于 Vue 数据 与 视图 绑 定 的 特点 ， 当 store 中 
的 状态 发 生变 化 时 ， 与 之 绑 定 的 视图 也 会 被 重新 泻 染 。 
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这 是 一 个 单 向 的 过 程 ， 因 为 store 中 的 状态 不 允许 被 直接 修改 。 改 变 store 中 的 状态 
的 唯一 途径 就 是 显 式 地 提交 (commit) mutation， 这 可 以 让 我 们 方便 地 跟踪 每 一 个 状态 的 
变化 。《〈 在 大 型 复杂 应 用 中 ， 如 果 无 法 有 效 地 跟踪 到 状态 的 变化 ， 将 会 对 理解 和 维护 代 
码 带 来 极 大 的 困扰 。 假 如 你 能 很 好 地 理解 使 用 Vuex 进行 状态 管理 的 缘由 ， 你 就 应 该 尽力 
遵循 “ 显 式 ” 的 原则 ， 即 使 你 可 以 跳 过 这 个 过 程 。) 

Vuex 中 有 5 个 重要 的 概念 : State、Getter、Mutation、Action、Module。 

State 用 于 维护 所 有 应 用 层 的 状态 ， 并 确保 应 用 只 有 唯一 的 数据 源 (SSOT，Single 
Source of Truth) 。 


State 的 用 法 如 下 : 


new Vuex.Store({ // 创建 仓库 
state: { 
count: 1 
} 
}) 


在 组 件 中 ， 我 们 可 以 直接 使 用 $store.state.count (前 提 是 store 已 被 注册 到 实例 中 ) ， 
也 可 以 先 用 mapState 辅助 函数 将 其 映射 下 来 ， 代 码 如 下 : 


import { mapState } from 'vuex' 
export default { 
computed: { 
...mapstate(['count']) // ... 是 ES6 中 的 对 象 展开 运算 符 
} 
} 


Getter 维护 由 State 派生 的 一 些 状态 ， 这 些 状态 随 着 State 状态 的 变化 而 变化 。 与 计 
算 属 性 一 样 ，Getter 中 的 派生 状态 在 被 计算 之 后 会 被 缓存 起 来 ， 当 重复 调用 时 ， 如 果 被 
依赖 的 状态 没有 变化 ， 那 么 Vuex 不 会 重新 计算 派生 状态 的 值 ， 而 是 直接 采用 缓存 值 。 

Getter 的 用 法 如 下 : 


new Vuex.Store({ // 创建 仓库 
state: { 
count: 1 
}, 
getters: 1 
tenTimesCount (state) { // Vuex 为 其 注入 state 对 象 
return state.count * 10 
} 
} 
1) 
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在 组 件 中 ， 我 们 可 以 直接 使 用 $store.getters.tenTimesCount， 也 可 以 先 用 mapGetters 
辅助 函数 将 其 映射 下 来 ， 代 码 如 下 : 


import { mapGetters } from 'vuex' 
export default { 
computed: { 
.. -mapGetters (['tenTimesCount']) // .. .是 ES 6 中 的 对 象 展开 运算 符 
} 
和 


Mautation 提供 修改 State 状态 的 方法 。 
Mutation 的 用 法 如 下 : 


new Vuex.Store({ // 创建 仓库 
state: { 


mutations: { 
addCount (state, num) { 
state.count += num || 1 
} 
} 
}) 


在 组 件 中 ， 我 们 可 以 直接 使 用 store.commit 来 提交 mutation， 代 码 如 下 : 


methods: { 
addcount () { 
this.$store.commit ('"addcount') // store 被 注入 到 vue 实 例 中 后 可 使 用 his .$store 
} 
} 


也 可 以 先 用 mapMutation 辅助 函数 将 其 映射 下 来 ， 代 码 如 下 : 


import { mapstate, mapMutations } from 'vuex' 
export default { 
computed: { 
.. .mapstate(['count']) // .-. .是 ES 6 中 的 对 象 展开 运算 符 
}, 
methods: { 
.. .mapMutations(['"addCount'])， 
.. -mapMutations({ // 为 mutation 赋 别名 ， 注 意 冲突 ， 此 方法 不 常用 
increaseCount: "addCcount 
}) 
” 
| 


Action 类 似 Mutation， 不 同 在 于 : 


|36 。 Vue.js 从 入 门 到 项 目 实战 | 


@ Action 不 能 直接 修改 状态 ， 只 能 通过 提交 mutation 来 修改 。 
@ Action 可 以 包含 异步 操作 。 


Action 的 用 法 如 下 : 


new Vuex.Store({ // 创建 仓库 
state: { 
count: 0 
}, 
mutations: { 
addCount (state, num) { 
state.count += num || 1 
} 
}, 
actions: { 
// context 具 有 和 store 实 例 相同 的 属性 和 方法 
// 可 以 通过 context 获 取 state 和 getters 中 的 值 ， 或 者 提交 mutation 和 分 发 其 他 的 action 


addCountAsync (context, num) { 


setIinterval (function () { 
if (context.state.count < 2000) { 
context .commit ('addCount', num || 100) 


} 
}, num || 100) 
} 
} 
}) 


在 组 件 中 ， 我 们 可 以 直接 使 用 store.dispatch 来 分 发 action， 代 码 如 下 : 


methods: { 
addCountAsync (num) { 
this.$store.dispatch('addCountAsync', num) 
} 
} 


或 者 使 用 mapActions 辅助 函数 先 将 其 映射 下 来 ， 代 码 如 下 : 


import { mapstate, mapActions } from 'vuex' 
export default { 
computed: { 
.. -mapstate(['count']) // .--. 是 ES 6 中 的 对 象 展开 运算 符 


}， 
methods: { 
.. .mapActions(['addCountAsync"']), 
.. .mapActions({ // 为 action 赋 别名 ， 注 意 冲 突 ， 此 方法 不 常用 
increaseCountAsync: "addCountRsync'" 
}) 
} 
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由 于 使 用 单一 状态 树 ， 当 项 目的 状态 非常 多 时 ，store 对 象 就 会 变 得 十 分 腑 肿 。 


此 ，Vuex 允许 我 们 将 store 分 割 成 模块 (Module) ， 每 个 模块 拥有 独立 的 State、Getter、 
Mutation 和 Action， 模 块 之 中 还 可 以 嵌 套 模块 ， 每 一 级 都 有 着 相同 的 结构 。 

Module 的 用 法 如 下 : 

// 定义 模块 


const counter = { 
namespaced: true， // 定义 为 独立 的 命名 空间 


state: { 
count: 0 

}， 

getters: { 


// 在 模块 中 ， 计 算 方法 还 会 具有 rootSstate、rootGetters 参 数 以 获取 根 模块 中 的 数据 
tenTimesCount (state, getters, rootState, rootGetters) { 
console.log(state, getters, rootSstate, rootGetters) 
return state.count * 10 
} 
}, 


mutations: { 
addCount (state, num) { 
state.count += num || 1 


} 
}, 
actions: { 
// context 具 有 和 store 实 例 相同 的 属性 和 方法 
// 可 以 通过 context 获 取 state 和 getters 中 的 值 ， 或 者 提交 mutation， 分 发 action 
// 在 模块 中 ，context 还 会 具有 rootState 和 rootGetters 属 性 以 获取 根 模块 中 的 数据 
addCountAsync (context, num) { 
setInterval (function () { 
if (context.state.count < 2000) { 
context .commit ('addCount', num || 100) 
} 
}, num || 100) 
} 
} 


} 
// 创建 仓库 
new Vuex.SsStorel({ 
modules: { // 注册 模块 
counter 


]) 
在 组 件 中 ， 模 块 的 使 用 方法 如 下 : 


import { mapState，mapGetters，mapMutations，mapRctions } from 'Vuex'" 
export default { 
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computed: { 
// 辅助 函数 的 第 一 个 参数 为 模块 的 名 称 
.. -mapState ( "Counter'。， ['"count'"'])， 
-. .mapGetters ('counter'， ['tenTimesCount']) 
}, 
methods: { 
.. .mapMutations('counter', ['addCount']), 
.. -mapActions('counter', ['addCountAsync']) 
$ 
$ 


最 后 ， 结 合 Vuex 用 于 管理 分 散在 各 个 组 件 中 的 状态 和 追踪 状态 变更 的 初衷 ， 笔 者 简 
单 总 结 了 一 下 这 些 概念 。 作 为 一 个 状态 管理 器 ， 首 先 要 有 保管 状态 的 容器 一 一 State; 为 
了 满足 衍生 数据 和 数据 链 的 需求 ， 从 而 有 了 Getter; 为 了 可 以 “ 显 式 地 ”修改 状态 ， 所 
以 需要 Mutation; 为 了 可 以 “异步 地 ”修改 状态 (满足 AJAX 等 异步 数据 交互 ) ， 所 以 
需要 Action; 最 后 ， 如 果 应 用 有 成 百 上 千 个 状态 ， 放 在 一 起 会 显得 十 分 庞杂 ， 所 以 分 模 
块 管理 (Module) 也 是 必 不 可 少 的 。 

Vuex 的 用 法 如 上 ， 应 该 并 不 难 理解 。 那 么 如 何 将 Vuex 集成 到 项 目 中 呢 ? 笔者 将 在 
下 一 小 节 中 进行 介绍 。 


6.3.3 在 项 目 中 使 用 Vuex 
首先 ， 我 们 打开 之 前 构建 好 的 项 目 my-project， 在 命令 行 中 输入 : 


cnpm install vuex --save-dev 


安装 插件 。 
之 后 ， 在 src 目录 下 创建 store、store/index.js、Sstore/modules、Sstore/modules/counter. 
js， 创 建 好 的 文件 路 径 如 图 6.8 所 示 。 


v Msrc 
> Massets 
Y Mcomponents 
访 HelloWorldvue 
v Mrouter 
里 indexjs 
v Mstore 
v Mmodules 
甘 counterjs 
总 indexjs 
是 Appvue 


名 maink 


6.8 ”集成 Vuex 的 文件 目录 
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其 中 ，store 是 我 们 进行 Vuex 仓库 开发 的 工作 目录 ，store/indexjs 是 仓库 的 输出 文件 ， 
store/modules 目录 用 于 放置 各 个 模块 ，store/modules/counterjs 文件 是 一 个 加 数 器 模块 。 


store/modules/counterjs 中 的 代码 如 下 : 


export default { 
namespaced: true， // 定义 为 独立 的 命名 空间 


state: { 
count: 0 

}, 

getters: { 


// 在 模块 中 ， 计 算 方法 还 会 具有 rootstate、rootGetters 参 数 以 获取 根 模块 中 的 数据 
tenTimesCount (state, getters, rootState, rootGetters) { 
console.log(state, getters, rootSstate, rootGetters) 
return state.count * 10 
} 
hs 
mutations: { 
addCount (state, num) { 
state.count += num || 1 
} 
}, 
actions: { 
// context 具有 和 store 实 例 相 同 的 属性 和 方法 
// 可 以 通过 context 获 取 state 和 getters 中 的 值 ， 或 者 提交 mutation， 分 发 action 
// 在 模块 中 ，context 还 会 具有 rootState 和 rootGetters 属 性 以 获取 根 模块 中 的 数据 
addCountAsync (context, num) { 
setInterval (function () { 
if (context.state.count < 2000) { 
context .commit ('addCount', num || 100) 
} 
}, num || 100) 
} 
} 
} 


store/index.js 中 的 代码 如 下 : 


import Vue from 'vue' 
import Vuex from 'vuex' 
import counter from './modules/counter' // 引入 加 数 器 模块 


Vue.use (Vuex) ”// 安装 插件 


export default new Vuex.Store({ // 实例 化 vuex 仓 库 
modules: { 
counter 
} 
1) 
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在 这 两 个 文件 中 ， 笔 者 实例 化 了 一 个 Vuex 仓库 并 构建 了 一 个 加 数 器 模块 。 之 后 ， 我 
们 要 在 Vue 实例 中 引入 这 个 仓库 ， 这 还 需要 修改 两 个 文件 : webpack 的 入 口 文件 mainjs 
和 单 组 件 文件 components/HelloWorld.vue。 

修改 后 的 mainjs 的 代码 如 下 : 


import Vue from ‘'vue' 

import App from './App' 

import router from './router' // 引入 router 
import store from './store' // 引入 store 


Vue.config.productionTip = false 


/* eslint-disable no-new */ 
new Vue({ // Vue 实 例 
ls "#app", 
Fouter， // 注册 router 
store， // 注册 store 
components: { APP }, 
template: '<App/>"' 
}) 


在 这 里 ， 笔 者 将 仓库 注册 到 Vue 实例 中 。 
修改 后 的 components/HelloWorld.vue 的 代码 如 下 : 


<template> 
<div class="hello"> 
<h2>count: {{ count }}</h2> 
<h2>ten times: {{ tenTimesCount }}</h2> 
<button @click="addCountAsync(50)">add Count</button> 
<button @click="addCount (20)">add Count2</button> 
</div> 
</template> 


<script> 
import { mapstate, mapGetters, mapMutations, mapActions } from 'vuex' 
export default { 
computed: { 
// 辅助 函数 的 第 一 个 参数 为 模块 的 名 称 
“samMmapstate( comnter", Lcount”]), 
.. .mapGetters('counter', ['tenTimesCount']) 
}, 
methods: { 
.. .mapMutations('counter', ['addCount']), 
.. .mapActions('counter', ['addCountAsync']) 
} 
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</script> 


<!-- Rdd "scoped" attribute to limit CSS to this component only --> 
<style scoped> 
YL 了 瑟 间 
font-weight: normal; 
ul 1{ 
list-style-type: none; 
padding: 0; 
} 
i 下 
display: inline-block; 
margin: 0 10px; 
} 
af 
color: #42b983; 
让 
</style> 


在 这 里 ， 笔 者 将 仓库 中 的 状态 与 视图 进行 了 绑 定 。 
项 目的 初始 页 面 如 图 6.9 所 示 。 


count 0 A Fner reoected slate 日 品 


ten times: 0 


[ad count | add Count2 


图 6.9 加 数 器 的 初始 视图 


当 点 击 “add Count2” 按 钮 之 后 ， 页 面 如 图 6.10 所 示 。 
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count: 20 
ten times: 200 


a Count [dd Count2 


6.10 ”增加 数值 之 后 的 加 数 器 


Vuex 并 不 是 Vue 应 用 开发 的 必 选 项 ， 在 使 用 时 ， 应 先 考虑 项 目的 规模 和 特点 ， 有 选 
择 地 进行 取舍 ， 盲 目地 选用 只 会 带 来 更 多 的 开发 成 本 。 

Vuex 为 开发 者 提供 了 多 种 写法 ， 不 过 笔者 并 不 推荐 过 多 尝试 和 写法 上 的 变换 ， 毕 竟 
保持 一 致 的 风格 也 是 高 质量 代码 的 一 种 表现 ， 除 非 这 种 变化 是 一 种 进步 。 

本 章 所 介绍 的 工具 和 插件 均 是 由 Vue 官方 提供 并 维护 的 ， 你 可 以 选择 用 或 不 用 ， 取 
决 于 实际 情况 。 

到 这 里 ， 概 念 性 的 章节 就 结束 了 。 从 下 一 章 开始 ， 我 们 将 进入 实战 课程 。 


水 1 | 进 


\ 一 一 跟 林 入 芽 


第 7 章 打造 线 上 商城 (一 ) 


不 知道 同学 们 有 没有 过 创业 的 想法 ， 笔 者 在 大 学 里 可 是 像 模 像 样 地 实践 过 ， 是 
关于 区 域 性 电子 商务 的 ， 简 单 地 说 ， 就 是 校园 内 线 上 零食 采购 ， 线 下 专人 配送 ， 不 过 
最 后 以 失败 告终 。 之 后 看 到 许多 成 熟 的 相似 平台 出 现 , 才 知 道 有 这 种 想法 的 人 并 不 少 ， 
笔者 并 不 算 在 前 列 ， 也 不 具备 成 熟 的 条 件 。 

现在 各 行 各 业 的 电 商 平台 已 经 趋 于 成 熟 ， 前 有 京东 、 天 猫 等 巨 苟 擎 天 , 后 有 苏宁 、 
小 米 之 家 等 借 线 下 之 力 成 线 上 之 功 ， 想 要 从 重重 围 堵 之 间 杀 出 血路 并 不 容易 。2018 
年 以 来 听 说 现象 级 电 商 拼 多 多 以 社交 和 娱乐 的 推广 方式 获得 大 众 青睐 ， 成 为 又 一 新 
星 ， 不 过 研究 一 下 其 背景 ， 原 来 也 是 大 佬 齐 聚 ， 并 且 十 年 前 便 已 入 场 。 

电 商 作为 一 种 新 兴 的 互联 网 产业 已 经 遍及 大 街 小 埠 ， 那 么 它 的 网 上 平台 到 底 是 如 
何 打造 的 呢 ? 笔者 将 会 通过 这 两 章 的 内 容 来 演示 如 何 打 造 一 个 线 上 商城 的 Web 客户 端 。 


7.1 项 目 规划 


同学 们 是 否 还 记得 完整 的 软件 项 目 流程 呢 ? 

“一 个 成 熟 的 软件 项 目 流程 应 该 包括 需求 分 析 、 可 行 性 研究 、 概 要 设计 、 详 细 设 计 、 
编码 与 开发 、 测 试 、 部 署 与 维护 ……” 

笔者 可 没有 唤起 你 们 久远 记忆 的 打算 ， 不 过 前 非 们 总 结 的 经 验 虽 然 星 涩 ， 但 总 有 其 
智慧 之 处 。 这 里 ， 笔 者 简单 走 个 形式 。 


7.1.1 需求 分 析 


不 知 同学 们 在 网 购 时 经 常会 看 到 哪些 页 面 ， 用 到 哪些 功能 呢 ? 

首先 ， 网 站 应 该 有 一 个 首页 ， 上 面 能 看 到 商城 的 logo、 商 品 和 店铺 的 搜索 框 、 购 物 
车 和 订单 的 跳 转 链接 、 大 幅 的 广告 幻灯 片 、 细 分 商品 品类 的 导航 、 商 品 和 店铺 的 推荐 链 
接 等 ， 如 图 7.1 所 示 。 

在 点 击 商品 时 ， 我 们 会 进入 商品 的 详情 页 ， 该 页 应 该 包含 相关 商品 的 图 片 展示 、 商 
品名 称 、 商 品 价格 、 发 货 方式 及 发 货 地 址 等 ， 并 允许 用 户 选 择 购买 的 数量 、 购 买方 式 (将 
商品 加 入 购物 车 或 者 直接 购买 商品 ) ， 如 图 72 所 示 。 
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图 7.2 商品 详情 页 


之 后 ， 我 们 还 需要 购物 车 和 订单 两 个 页 面 来 显示 已 加 入 购物 车 和 订单 中 的 商品 。 
在 购物 车 页 面 ， 用 户 可 以 选择 结算 或 者 删除 商品 ， 如 图 7.3 所 示 。 
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图 7.3 购物 车 页 面 


在 订单 页 面 ， 用 户 可 以 选择 退货 、 退 款 等 ， 如 图 7.4 所 示 。 
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7.4 订单 页 面 
本 节 实 战 的 核心 内 容 即 为 这 四 个 页 面 ， 由 于 没有 与 后 台 进行 交互 ， 所 以 一 些 动态 的 
信息 和 功能 并 没有 展示 和 实现 。 
7.1.2 ”流程 分 析 
笔者 对 用 户 可 能 执行 的 活动 流程 进行 分 析 ， 并 绘制 了 一 张 简 图 ， 如 图 7.5 所 示 。 


首页 商品 详情 页 购物 车 订单 
查看 商品 ,入 看 商品 "| > 查看 商品 
一 遂 货 退 款 
,4 
选择 数量 | ] 删除 商品 。 | 结算 商品 | 
立即 购买 ,查看 商品 


7.5 用 户 活动 流程 
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想必 这 些 活动 对 于 同学 们 来 说 并 不 陌生 ， 这 里 笔者 不 再 多 说 。 


7.2 项 目 展示 


在 本 节 中 ， 笔 者 将 演示 项 目 各 页 面 的 视图 表现 和 具备 的 功能 ， 以 使 大 家 对 项 目 有 个 
基本 的 认识 。 当 然 ， 这 些 视图 和 功能 均 在 笔者 之 前 规划 的 内 容 中 。 在 下 一 章 中 ， 笔 者 将 
对 项 目的 实现 代码 进行 详细 讲解 。 
72J4 首页 

首页 概览 如 图 7.6 所 示 。 


muotkai 话 泰 


饶 惠 来 袭 ! 
二 立即 挫 购 


精品 推荐 


我 们 的 商城 名 为 “ 购 尚 ”, 你 也 可 以 选择 其 他 的 名 称 , 不 过 笔者 准备 的 logo 可 只 有 一 个 ， 
如 图 7.7 所 示 。 
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纸 购 沿 


图 7.7 商城 logo 


点 击 页 面 上 的 logo 即 可 跳 转 到 首页 。 
顶部 banner 为 各 个 页 面 所 共有 。 在 此 处 ， 笔 者 还 设置 了 商品 和 店铺 的 搜索 框 、 购 物 
车 和 订单 的 跳 转 链接 等 ， 如 图 7.8 所 示 。 


我 的 订单 ”天 风物 车 ” 效 若 大 。” 离 家 入 口 


rm EE 


图 7.8 header 


在 中 部 banner 中 ， 笔 者 设置 了 各 种 细 分 类 目 商品 的 导航 及 部 分 商品 的 付费 广告 。 这 
里 要 注意 一 点 ， 考 虑 到 网 页 对 不 同 分 辨 率 〈 只 考虑 宽度 1120px 以 上 ) 的 兼容 ， 笔 者 将 幻 
灯 片 的 宽度 设置 为 1120px 且 居中 对 齐 ， 两 侧 留 白 使 用 背景 颜色 填充 ， 如 图 7.9 所 示 。 


7.9 中 部 banner 


在 底部 banner 中 ， 笔 者 设置 了 几 件 商品 的 快捷 链接 ， 点 击 即 可 跳 转 到 对 应 商品 的 详 
情 页 ， 如 图 7.10 所 示 。 


| 第 7 章 打造 线 上 商城 (一 ) 


| 


精品 推荐 


入 4 尝 持 久 如 新 
多 屋内 更 [REF 


八 号 系 业 铁 观 吾 共 叶 波 香 型 要 珍 
球 1000g 


Er em sse 了 600 00 


Lee 胃 装 2018 青 夏 X-LINE 白 色 
知 神 T 几 秒 赤 另 神 


后 fi aspan Cast ¥ 239 00 


证 及 言及 浊 加 热 女 生 必 和 
区 


ot x050 人 失信 ¥ 208 00 


图 7.10 底部 banner 


这 里 的 商品 信息 均 由 笔者 模拟 并 存储 于 浏览 器 端 ，JS 代码 如 下 : 


goods: [ 
{ 
name: 'qixi'， // 标识 
text : ' 七 喜 柠 榜 味 碳酸 饮料 整 箱 330m1*24 促 销 装 '， 
address: ' 上 海 '，// 发 货 地 址 
type: ' 满 88 (20kg 内 ) 包 邮 '， // 发 货 方式 
price: '48.90'， // 原价 
onlinePrice: '43.90'，// 促销 价 
cover: './static/images/qixi01.jpg'，// 封面 图 路 径 


// 标题 


poster: './static/images/slide01.png', 
color: '#e8e8e8', 
// 详情 图 路 径 


images: [ 
'./static/images/qixi01.jpg', 
'./static/images/qixi02.jpg', 
'./static/images/qixi03.jpg', 
'./static/images/qixi04.jpg', 
'./static/images/qixi05.jpg"' 
]， 


thumbnails: [ // 缩 略图 路 径 


'./static/images/qixi01 sm.jpg', 


'./static/images/qixi02_ sm 
'./static/images/qixi03_ sm 
'./static/images/qizxi04 sm 
'./static/images/qixi05 sm 
] 
} 
] 


-jpg', 
-jpg', 
-jpg', 
-jpg" 


对 于 与 后 台 交 互 的 项 目 来 说 ， 这 些 信息 应 该 存储 在 数据 库 中 ， 属 于 动态 数据 。 不 过 
对 于 一 个 单机 的 项 目 来 说 ， 这 些 内 容 却 属于 静态 数据 ， 笔 者 也 称 为 “配置 项 ”一 一 对 于 
静态 视图 的 配置 ， 当 我 们 配置 了 该 项 ， 视 图 显示 该 项 ， 当 我 们 配置 了 男 一 项 ， 视 图 则 会 
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显示 另 一 项 。 
7.2.2 ”商品 详情 


设置 核心 内 容 区 为 固定 宽度 且 居 中 对 齐 ， 这 是 一 个 十 分 简便 而 又 良好 的 兼容 策略 ， 
常见 于 各 种 网 站 ， 大 平台 也 不 例外 。 在 这 几 个 页 面 中 ， 笔 者 也 都 有 用 到 这 一 策略 。 
商品 详情 页 的 概览 如 图 7.11 所 示 。 


岛 购 沿 CT Er 


图 7.11 商品 详情 页 


在 左 侧 banner 中 ， 笔 者 准备 了 多 张 商品 的 详情 图 ， 当 鼠标 划 过 列表 中 的 缩 略 图 时 ， 
详情 区 会 立即 切换 图 片 ， 如 图 7.12 所 示 。 


SpE 


图 7.12 切换 商品 详情 


| 第 7 章 打造 线 上 商城 (一 ) ”|5| 


在 右 侧 banner 中 ,用户 可 以 选择 商品 的 数量 , 选择 立即 购买 商品 或 将 商品 加 入 购物 车 。 
这 里 笔者 做 了 一 个 小 动画 ， 当 “立即 购买 ”或 “加 入 购物 车 ”按钮 被 点 击 时 ， 详 情 图 将 
会 分 身 并 沿 直线 路 径 快速 移动 到 顶部 “我 的 订单 ”或 “购物 车 ”处 ， 以 通知 用 户 按键 事 
件 已 发 生 ， 笔 者 截 下 动画 运行 时 的 一 帧 ， 并 绘 上 移动 轨迹 ， 如 图 7.13 所 示 。 


iw 泛 国 中 


7.13 ”商品 分 身 的 移动 路 径 


其 他 商品 的 详情 页 与 此 类 似 。 笔 者 只 开发 了 核心 功能 ， 并 没有 作 任 何 差异 化 处 理 ， 
细节 部 分 同学 们 可 以 在 练习 时 自行 丰富 和 拓展 。 


7.2.3 ”购物 车 


在 商品 详情 页 中 ， 用 户 选 择 “ 加 入 购物 车 ”的 商品 ， 将 会 在 购物 车 页 面 显示 。 

由 于 页 面 核心 区 域 的 宽度 也 被 固定 为 1120px， 且 购物 车 商品 列表 可 视 作 一 个 二 维 数 
组 ， 因 此 笔者 直接 采用 表格 〈table) 作为 购物 车 的 框架 元 素 ， 这 也 符合 语义 化 HTML 的 
要 求 。 

也 许 有 的 同学 尚未 接触 到 语义 化 的 概念 ， 你 可 以 到 搜索 网 站 查询 一 下 这 个 词汇 的 定 
义 和 要 求 ， 也 可 以 只 记 住 一 个 问题 : 当 你 的 网 页 去 掉 CSS 样式 表 后 ， 是 否 还 能 以 有 序 可 
读 的 方式 〈 尽 管 很 丑 ) 呈现 ? 

这 里 ， 笔 者 还 是 为 表格 写 了 一 些 样式 ， 使 其 尽 可 能 优雅 一 些 ， 页 面 如 图 7.14 所 示 。 
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图 7.14 购物 车 页 面 
在 该 页 面 中 ， 用 户 可 以 修改 购物 车 中 商品 的 数量 、 删 除 或 结算 商品 。 当 勾 选 多 件 商 


品 时 ， 系 统 将 在 底部 自动 计算 出 被 勾 选 商品 的 总 价 ， 用 户 可 以 点 击 底部 “结算 ”按钮 进 
行 结算 ， 如 图 7.15 所 示 。 
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图 7.15 结算 多 件 商品 
被 结算 的 商品 将 出 现在 订单 页 面 中 。 


734 订单 


订单 页 面 与 购物 车 页 面相 似 ,不 过 此 处 可 执行 的 操作 只 有 退 款 。 订 单 页 如 图 7.16 所 示 。 
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7.16 订单 页 面 


也 许 有 的 同学 会 有 疑问 : 物流 信息 呢 ? 其 实 ， 物 流 信息 只 是 一 个 字段 而 已 ， 由 后 台 
提供 。 对 于 该 项 目 来 说 ， 你 可 以 选择 模拟 ， 也 可 以 选择 不 模拟 ， 无 关 紧 要 。 不 过 ， 笔 者 
选择 了 后 者 ， 因 为 笔者 不 想 为 此 多 生 一 个 维度 。 

其 实 , 在 实际 项 目 中 , 许多 东西 对 于 前 端 来 说 只 是 一 个 字段 而 已 , 无 论 何 种 庞然大物 、 
精密 工序 ， 皆 可 视 为 透明 ， 其 后 也 有 无 数 如 你 我 这 样 的 劳动 人 民 为 之 辛劳 。 术 业 有 专攻 ， 
前 端 需要 做 的 是 ， 将 拿 到 手 的 东西 更 好 地 呈现 出 来 。 

在 下 一 章 中 ， 笔 者 将 对 项 目的 代码 进行 讲解 。 在 项 目 中 ， 所 有 的 组 件 均 由 笔者 亲自 
编写 ， 因 此 部 分 内 容 可 能 稍微 难以 理解 ， 希 望 同 学 们 能 够 结合 本 章 内 容 进行 学 习 。 

此 外 ， 项 目 源码 将 随 书 附 赠 。 
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在 上 一 章 中 ， 笔 者 已 经 演示 了 我 们 将 要 实战 的 项 目 。 在 本 章 中 ， 笔 者 将 针对 项 
目 构建 和 代码 中 的 几 个 细节 点 进行 详细 讲解 。 


8.1 项 目 构 建 


这 里 我 们 依然 使 用 Vue CLI 构建 项 目 。 如 果 你 对 Vue CLI 尚 不 熟悉 的 话 ， 请 回顾 第 
六 章 中 的 相关 内 容 。 


8.1.1 目录 结构 


在 构建 好 的 项 目 目录 下 ， 我 们 可 以 看 到 Vue CLI 生成 的 许多 文件 和 文件 夹 ， 其 中 最 
重要 的 是 src 目录 ， 这 是 我 们 进行 开发 的 主要 场所 。 
笔者 对 src 目录 进行 了 一 些 改造 ， 改 造 后 的 文件 目录 如 图 8.1 所 示 。 
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图 8.1 src 文 件 夹 目录 
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assets/stylesheets 用 于 存放 独立 的 样式 表 。 笔 者 推荐 将 组 件 的 样式 表 放 在 组 件 模板 
中 书写 ， 而 stylesheets 中 的 样式 表 则 在 main .js 中 引入 ， 以 达到 全 局 共享 的 目的 。 
components 目录 用 于 存放 Vue 的 单 文件 模板 。 目 录 下 的 Index.vue、Goods.vue、 
Cartvue、Ordervue 分 别 对 应 我 们 的 商城 首页 、 商 品 详情 页 、 购 物 车 页 面 和 订单 
页 面 。 

config 目录 用 于 存放 一 些 配置 项 。 在 该 项 目 中 ， 笔 者 将 商品 信息 及 商品 细 分 类 目 
的 导航 作为 配置 项 。 

widgets 目录 用 于 存放 自 定 义 的 组 件 。 笔 者 在 项 目 中 自 定 义 了 复 选 框 和 幻灯 片 (也 
称 为 “跑马 灯 ” ) 两 个 组 件 。 


@ App.vue 是 项 目的 根 组 件 ， 挂 载 于 Vue 实例 上 。 
@ mainjs 是 webpack 的 入 口 文件 ， 我 们 可 以 在 里 面 引入 全 局 资源 (如 JS、CSS 等 ) 


8.1.2 


由 


和 上 声明 全 局 变量 。 


webpack 是 什么 ? 
于 我 们 的 Vue 项 目 在 构建 时 都 选择 使 用 webpack 来 打包 模块 ， 因 此 还 是 有 必要 将 


其 简单 介绍 一 下 。 

webpack 是 一 个 模块 打包 器 , 可 以 将 项 目 中 所 有 的 资源 打包 整合 并 注入 到 指定 位 置 。 
在 引入 并 配置 一 些 配套 插件 和 依赖 后 ，webpack 还 可 以 将 高 版 本 的 JS (如 ES 6 等 ) 和 JS 
的 替代 语言 (如 TypeScript、CoffeeScript 等 ) 、 预 编译 的 样式 表 (如 Sass/Scss、Less 等 ) 、 
模板 文件 (如 .vue、.jade 等 ) 编译 为 可 供 普 通 浏览 器 解析 的 代码 。 

这 里 有 个 问题 ，webpack 怎么 知道 该 去 打包 哪些 模块 呢 ? 

开发 者 在 配置 webpack 时 ， 需 要 提供 一 个 入 口 文件 ， 例 如 : 


Sentrye 这 


} 


app: './src/main.js' // 似曾相识 


以 告诉 webpack 应 该 从 这 个 文件 开始 检索 模块 。 
mainjs 中 的 代码 如 下 : 

import Vue from 'vue' 

import App from '. /App' 

import router from './router' 

import './assets/stylesheets/base.css' 
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import "font-awesome/css/font-awesome -min.css'" 
Vue .config.productionTip = false 


/* eslint-disable no-new */ 
new Vue ({ 
el: "#app"; 
router, 
components: { App }, 
template: '<App/>" 
}) 


从 代码 中 可 以 看 到 ， 笔 者 在 mainjs 中 引入 了 Vue 库 、App 组 件 、router 路 由 、base. 
css 和 font-awesome.min.css。 在 检索 完 mainjs 之 后 ， 此 时 webpack 又 有 了 新 的 目标 可 以 
打包 ， 即 以 上 提 到 的 内 容 。 

同学 们 还 记得 routerjs 的 作用 吗 ? 

routerjs 存放 着 项 目 有 关 前 端 路 由 的 配置 ， 该 项 目 中 的 代码 如 下 : 


import Vue from ‘'vue' 

import Router from 'vue-router' 

import Index from '@/components/Index' 
import Cart from '@/components/Cart' 
import Order from '@/components/Order' 
import Goods from '@/components/Goods' 


Vue.use (Router) 
export default new Router ({ 
routes: [ 
{ 
path: ?7/", 
name: 'Index', 
component: Index 
}, 
t 


path: '/goods', 
name: 'Goods', 
component: Goods 
}, 
{ 


path: '/cart'", 

name: 'Cart', 

component: Cart 
}, 


path: '/order', 
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name: 'Order' 
component: Order 
} 
] 
}) 
不 用 多 说 ， 下 一 步 webpack 将 继续 层 层 深入 打包 这 些 引入 的 模块 。 可 以 看 到 ， 在 
routerjs 引入 的 模块 中 ， 除 了 Vue Router 之 外 ， 其 他 模块 均 是 我 们 开发 的 Vue 模板 文件 。 


笔者 根据 当前 项 目 绘制 了 一 张 webpack 的 工作 流程 图 ， 如 图 8.2 所 示 。 


不 不 T 
Vie Cart.vue Index.vue| | ee 
Router 
i i 
Vue | base.css Touterjs | | ee 
+ T 
2. 编 译 、 打 包 main.js 人 webpack 
*.css (可 选 ) - 
3. 注 入 *.html 
*js 


8.2 ”webpack 工作 流程 


在 Vue CLI 构建 的 项 目 中 ，build 目录 下 存放 着 webpack 的 配置 文件 ， 感 兴趣 的 同学 
可 以 对 照 webpack 的 官方 文档 查看 一 下 各 个 配置 项 的 意义 。 在 书后 的 附录 中 ， 笔 者 还 会 
对 其 另行 讲解 。 
8.1.3 ”Font Awesome 图 标 库 

Font Awesome 是 一 套 不 错 的 图 标 库 ， 它 提供 了 几 百 个 图 标 并 且 用 法 十 分 简单 ， 足 以 
应 付 日 常 开发 的 需求 。 


如 果 项 目 对 于 图 标的 要 求 十 分 严格 的 话 , 那 也 不 错 , 可 以 和 美工 们 "亲切 会 晤 ”了 (Good 
Luck) 。 或 者 ， 你 也 可 以 到 “阿里 巴巴 矢量 图 标 库 ” 碰 碰 运 气 ， 网 上 搜索 关键 字 即 可 。 
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我 们 可 以 通过 CDN 直接 引入 Font Awesome， 代 码 如 下 : 


<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font— 
awesome.min.css" rel="stylesheet"> 


不 过 既然 是 在 使 用 了 npm 的 项 目 ， 笔 者 还 是 推荐 使 用 cnpm 来 安装 依赖 ， 命 令 如 下 : 

cnpm install font-awesome --save-dev 

之 后 ， 我 们 需要 在 mainjs 中 全 局 引入 依赖 ， 代 码 可 以 在 上 一 小 节 中 看 到 。 

在 使 用 时 ， 你 需要 查看 Font Awesome 的 官方 文档 ， 查 找 合适 的 图 标 ， 比 如 我 们 需要 
一 个 购物 车 图 标 以 使 页 面 上 的 文字 不 显得 那么 单调 。 幸 运 的 是 ， 这 里 刚好 有 购物 车 图 标 
供 我 们 使 用 ， 如 图 8.3 所 示 。 


和 515 (alias) 办 Q search 

A send alias) [9 本 send-o (alias) 
share-alt 中 share-alt-square 
vO shield 中 旦 ship 

EE shopping 只 fy shower 

WD sign-out [9 ll signal 

硅 sliders ® © smile-o 


8.3 ”购物 车 图 标 


我 们 可 以 使 用 span 或 者 i 标签 将 图 标 添加 到 页 面 上 ， 只 需要 为 其 设置 相应 的 类 名 就 
可 以 ， 代 码 如 下 : 


<i class="fa fa-shopping-cart"></i> 


假如 我 们 需要 一 个 搜索 的 图 标 呢 ? 
只 需要 更 改 类 名 就 可 以 了 ， 代 码 如 下 : 


<i class="fa fa-search"></i> 


.二 是 Font Awesome 预 设 的 图 标的 基本 样式 ， 源 码 如 下 : 


fat 
display: inline-block; /* 关键 ， 改 变 元 素 显示 等 级 */ 
font: normal normal normal 14px/1 FontAwesome; J 使 用 Font Awesome 
字体 */ 
font-size: inherit; 
text-rendering: auto; /* 泻 染 和 优化 策略 ，auto 为 默认 值 */ 
-webkit-font-smoothing: antialiased; /* webkit 内 核 ， 字 体 平滑 策略 ， 此 处 


抗 锯齿 */ 


-moz-osx-font-smoothing: grayscale; 


} 
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/* moz 内 核 ( 火狐 ) ， 此 处 抗 锯齿 */ 


现在 ， 我们 的 购物 车 似乎 丰满 了 一 些 ， 如 图 8.4 所 示 。 


图 8.4 页 面 上 的 购物 车 


在 项 目的 其 他 地 方 ， 笔 者 还 用 到 了 许多 图 标 ， 用 法 大 同 小 异 ， 这 里 不 再 多 说 。 


8.2 动态 资源 和 数据 


8.2.1 关于 配置 


在 src/config/configjs 中 ， 笔 者 模拟 了 一 些 商品 的 信息 ， 代 码 如 下 : 


export default { 


goods: [ 
{ 
name: "nuotai'， 
text : “" 诺 泰 暖 宫 护 腰 艾 灸 加 热 女生 必 备 神器 ' ， 
address: "山东 泰安 '， 
type: ' 包 邮 ' 
pricas "535.00", 
onlinePrice: '208.00°', 
cover: './static/images/nuotai01.jpg', 
poster: './static/images/slide01.png', 
color: '#e8e8e8', 


images: [ 
'./static/images/nuotai01 
'./static/images/nuotai02 
'./static/images/nuotai03 
'./static/images/nuotai04 
'./static/images/nuotai05 

]， 

thumbnails: [ 


"./static/images/nuotai0l . 
'./static/images/nuotai02 . 
'./static/images/nuotai03 . 
'./static/images/nuotai04 . 
'./static/images/nuotai05 . 


-jpg', 
:jpg', 
:jpg', 
-jpg', 
:jpg" 


sm.jpg', 
sm.jpg', 
sm.jpg', 
sm.jpg', 
sm.jpg" 
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之 后 ， 笔 者 在 Index.vue 组 件 中 引入 并 将 这 些 商 品 泻 染 出 来 ， 代 码 如 下 : 


<template> 


<ul class="rec-list"> 
i 
class="rec-card" 
V-for=" (item, index) in goods" 
:key="index" 
Q@click="togglePage (item) "> 
<img class="rec-media" :src="item.cover"/> 
<div class="rec-profile"> 
<h4>{{ item.text }}</h4> 
<p class="rec-params"> 
原价 : <span class="rec-price">¥ {{ item.price }}</span>&nbsp; 
促销 价 : <span class="rec-online-price">¥ {{ item.onlinePrice 
}}</span> 
</p> 
</div> 


</template> 


<script> 
import config from '@/config/config" 
export default { 
name: 'Index', 


computed: { 
goods () { // 获取 配置 中 的 商品 信息 
return config.goods 
} 
}, 
methods: { 
togglePage (item) { // 跳 转 到 商品 详情 页 
this.$router.push({ path: 'goods', query: { name: item.name } 
1) 


} 
} 
</script> 
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也 许 有 的 同学 会 有 疑问 ， 为 什么 不 在 Index.vue 组 件 中 直接 定义 这 些 信 息 呢 ? 

第 一 点 原因 ， 这 些 信息 不 仅 在 Index.vue 中 被 使 用 ， 还 会 被 用 于 Goods.vue 中 。 如 果 
信息 有 所 变动 ， 那 么 需要 修改 的 地 方 不 止 一 处 ， 不 易于 长 时 间或 他 人 维护 。 

不 过 ， 为 什么 不 在 togglePage 方法 中 将 商品 信息 直接 传递 到 Goods 页 面 呢 ? 这 样 不 
是 可 以 保持 数据 的 一 致 性 吗 ? 传递 过 去 的 数据 确实 可 以 保持 一 致 性 ， 却 造成 了 另 一 个 问 
题 ， 当 用 户 强制 刷新 页 面 时 ， 传 递 过 去 的 数据 将 会 丢失 。 

考虑 到 用 户 强制 刷新 页 面 的 问题 ， 笔 者 也 为 此 专门 在 商品 详情 页 的 路 径 中 加 入 name 
参数 ， 用 以 标识 当前 商品 ， 并 根据 name 参数 从 配置 中 获取 商品 的 信息 ， 代 码 如 下 : 

item () { // 获取 当前 商品 的 信息 


return config.goods.findl(item => item.name === this.s$route.query. 
name) 
} 


商品 详情 页 如 图 8.5 所 示 。 


hp DB Pome me © ma- ree axes © sewmn 


七 喜 柠 标 昕 碳酸 饮料 整 箱 330mi*24 促 销 革 


ea 
¥43.90 


二 
Mes20on 


趣味 复古 欠 
7 喜 特 调 < 


8.5 ”借助 地 址 栏 标识 当前 商品 


可 以 看 到 ， 图 8.5 中 的 URL 为 http://localhost:8080/#/goods?name=qixi， 在 强制 刷新 
页 面 后 ， 商 品 信息 并 没有 丢失 。 
第 二 点 原因 ， 当 我 们 需要 更 换 商 城 的 商品 时 ， 得 益 于 配置 驱动 的 设 定 ， 我 们 只 需要 
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修改 配置 文件 即 可 ， 并 不 需要 修改 组 件 模板 ， 这 也 符合 “对 于 拓展 开放 ， 对 于 修改 关闭 ” 


( 


开 闭 原则 〉 和 “保持 对 象 间 最 小 通信 ”过 米 特 法 则 的 基本 原则 。 
配置 驱动 ， 这 是 一 种 最 佳 实践 和 思想 方法 ， 希 望 同学 们 并 不 只 是 看 到 笔者 在 这 个 


Demo 中 做 了 些 什 么 ， 而 是 能 有 自己 的 体会 和 感悟 ， 从 而 引导 自己 的 道路 。 


8.2.2 动态 资源 


JS 


盟 


我 


还 记得 项 目的 生产 版 本 如 何 构建 吗 ? 

我 们 可 以 运行 : 

npm run build 

来 构建 项 目的 生产 版 本 。 

之 后 ， 在 项 目 根 目录 下 将 会 出 现 一 个 dist 文件 目录 ， 目 录 结 构 如 图 8.6 所 示 。 


Y Mdist 
v MM static 

> Mcss 
> Mfonts 
> Mimages 
> Mimg 
> 有 js 

a favicon.ico 


十 indexhtml 


8.6 dist 文 件 目录 


就 这 样 ，src 目录 完成 了 它 的 使 命 ， 无 论 曾经 里 面 有 什么 ， 最 终 都 只 剩 下 HIML、 
、CSS， 还 有 图 片 。 
不 过 讲 到 图 片 ， 这 里 有 一 个 问题 : 


let image = 'image.png' 
let noImage = 'no image' 


这 两 者 有 什么 区 别 吗 ? 笔者 觉得 好 像 有 ， 从 程序 员 的 角度 来 说 ， 一 个 是 图 片 路 径 ， 
一 个 不 是 ;不 过 好 像 也 没有 ， 从 机 器 的 角度 来 说 ， 这 都 是 字符 串 啊 。 

那么 ， 麻 烦 来 了 。Vue CLI 并 不 能 识别 字符 串 是 否 是 图 片 路 径 ， 那 么 它 将 如 何 检索 
们 写 入 配置 中 的 路 径 〈 如 cover: “-/static/images/nuotai01.jpg”) 呢 ? 
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Vue CLI 确实 无 法 检索 此 类 的 动态 资源 ， 不 过 它 提 供给 我 们 另 一 种 选择 ， 将 这 些 资 
源 放 入 与 src 同 级 的 static 目录 下 。 当 Vue CLI 构建 生产 版 本 时 ， 该 目录 下 的 东西 将 会 被 
直接 注入 dist/static 中 。 

static 文件 目录 如 图 8.7 所 示 。 


> Msrc 
v Mstatic 
v Mimages 

己 bama01jpg 
司 bama01 smjpg 
忆 bama02jpg 
司 bama02 smjpg 
司 bama03jpg 


司 bama03 smjpg 
8.7 与 src 同 级 的 static 目录 


不 过 ， 哪 些 资源 属于 静态 资源 呢 ? 
<img Src="image .png"> 
<div style="background-image: url (image.png) "></div> 
<style> 

-bg-image { 

background-image: url (image.png); 

} 

</style> 


类 似 上 述 方式 使 用 的 资源 均 属于 静态 资源 (在 枚 举 范围 内 ,含有 机 器 可 解析 的 关 
键 字 ) 。 


8.2.3 动态 数据 的 存储 


笔者 选择 使 用 window.localStorage 来 存储 数据 , window.localStorage 的 基本 用 法 如 下 : 
// 设置 名 为 gsStore 的 数据 项 ， 不 接受 对 象 类 型 的 值 


window.localStorage.setItem('gsStore'， '{}') 
// 获取 名 为 gsStore 的 数据 项 
window.localSstorage.getItem('gsStore') 

// 移 除 名 为 gsStore 的 数据 项 

window.localStorage .removeItem('"gsStore') 

// 移 除 所 有 数据 项 


window.localStorage.-clear() 
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在 该 项 目 中 ， 购 物 车 和 订单 均 是 需要 存储 的 对 象 ， 因 此 笔者 将 其 定义 为 gsStore 对 象 
的 两 个 属性 ，gsStore 的 原型 如 下 : 


let gsStore = { 
cart: []， // 购物 车 
order: [] // 订单 
: 


由 于 window.localStorage 不 接收 对 象 类 型 的 数据 值 ， 所 以 在 读 取 和 写 入 时 ， 我 们 还 
需要 用 到 浏览 器 的 内 置 对 象 JSON， 代 码 如 下 : 


// 读 取 gsstore 
getstore () { 
let gsStore = Window.localStorage .getItem('gsStore') 
if (gsStore) { 
gsStore = JSON.parse (gsStore) // 将 字符 串 解析 为 JSON 对 象 
this.cart = gsStore.cart || [] 
this.order = gsStore.order || [] 
} 


’ 
// 写 入 gsStore 
setstore () { 
let gsStore = { 
carts thiss carts 
order: this.order 
} 
window.localstorage.setItem('gsstore', JSON.stringify(gsstore)) // 字符 
串 化 JSON 对 象 
} 


在 Goods.vue、Cart.vue、Order.vue 模板 中 均 会 用 到 这 两 个 方法 ， 我 们 可 以 选择 将 其 
复制 粘贴 到 每 一 处 或 者 将 其 封装 为 一 个 mixin 并 在 组 件 中 引入 。 


8.3 自 定 义 组 件 


在 该 项 目 中 ， 笔 者 封装 了 两 个 组 件 : 一 个 是 首页 的 幻灯 片 ， 另 一 个 是 购物 车 页 面 的 
复 选 框 。 下 面 ， 我 们 一 起 来 看 一 下 这 两 个 组 件 。 


8.3.1 幻灯 片 
先 来 看 一 下 约 灯 片 的 页 面 表现 ， 组 件 初始 视图 如 图 8.8 所 示 。 
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muokai 语 泰 


扫 惠 来 袭 ! 


Pe 


8.8 幻灯 片 首 屏 


切换 后 的 视图 如 图 8.9 所 示 。 


图 8.9 切换 后 的 幻灯 片 


Swiper.vue 中 的 代码 如 下 : 


<template> 
<div class="swiper-container"> 
<!-- 使 用 动态 样式 更 换 背 景 图 片 --> 
<div 
:style="{backgroundImage: "Url(' + bg + "')'}" 
class="swiper-image"></div> 
<!-- 定义 切换 按钮 --> 


<div class="swiper-paginator"> 


<span 
Vv-for=" (slide, index) in slides" 
:key="index" 
class="paginator-item" 


:class="{'paginator-current': index === value}" 
@mouseover="toggleIndex (index)" 
@mouseout="initTimer"></span> 
</div> 
</div> 
</template> 


bo 
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<script> 
export default { 
name: 'Swiper', 
props: { 
slides: { // slides 接 收 用 于 切换 的 图 片 数 组 
type: Array, 
validator (value) { // 判断 数组 元 素 类 型 是 否 为 字符 串 
return value .every (Item => Object.pPrototype.toString.call (item) 
=== '" [object String]') 


} 

}, 

interval: { // 设置 切换 间隔 时 间 ， 软 认为 4s 
type: Number, 
default: 4 


value: { // @ 自 定义 v-model， 用 于 接收 幻灯 片 页 码 ， 默 认为 0 
type: Number, 
default: 0 


data () { 
return { 
timer: null 
} 
}, 
computed: { 
bg () 1{ 
return this.slides[this.value] 
" 
}, 
mounted () { 
this .SnextTick(function () { 
this.initTimer() 
}) 
}, 
methods: { 
initTimer () { 


this.timer = setInterval(() => { // 设置 定时 器 ， 定 时 切换 幻灯 片 
// 加 自 定义 v-model， 通 知 父 级 修改 当前 幻灯 片 页 码 
this.$emit('input', (this.value + 1) $% this.slides.length) 

}, this.interval * 1000) 


]} 
toggleIndex (index) { // 当 鼠 标 划 过 幻灯 片 切换 按钮 时 
this.$emit ('input'，index) // @ 自 定义 v-model， 通知 父 级 修改 当前 
幻灯 片 页 码 
clearInterval (this.timer) // 清除 定时 器 


¥ 
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} 
} 
</script> 


<style scoped> 

.Swiper-container { 
position: relative; 
width: 100%; 
height: 100%; 

. 

.Swiper-image { 
height: 100%; 
background-size: cover; 
background-repeat: no-repeat; 

} 

.Swiper-paginator { 
margin-top: -30px; 
padding-right: Spx; 
text-align: right; 
list-style: none; 

} 

.paginator-item { 
cursor: pointer; 
display: inline-block; 
width: 16px; 
height: 16px; 
margin-left: Spx; 
border-radius: 50%; 
background-color: #000; 
Obacitys 0.37 

} 

.paginator-current { 
background-color: #fff; /* 当前 激活 的 幻灯 片 切换 对 应 按钮 样式 */ 
opacity: .6; 

} 

</style> 


之 后 ， 笔 者 在 Index.vue 将 其 引入 ， 代 码 如 下 : 


<template> 
<div class="swiper"> 
<Swiper :slides="slidesImage" v-model="index"></Swiper> 
</div> 
</template> 
<script> 
import Swiper from '@/widgets/Swiper' 
import config from '@/config/config' 
export default { 


167 
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name: '"Index'"， 
Components: { Swiper Ps 
data () { 
return { 
index: 0 
} 
}, 
computed: { 
slidesImage () { 
return config.goods.map (item => item.poster) 
} 
} 
} 
</script> 
<style scoped> 
.Swiper { 
height: 500px; 
background-color: #e8e8e8; 
} 
</style> 


@ 在 Swiper 组件 中 ， 由 slides 属性 接收 外 部 传 入 的 背景 图 片 列表 ; interval 属性 用 
于 决定 幻灯 片 切换 的 时 间 间 隔 ; 由 定时 器 定时 切换 显示 的 背景 图 片 。 

@ 笔者 为 Swiper 定义 了 V-model 指令 ， 使 其 可 以 向 外 部 暴露 当前 幻灯 片 的 页 码 。 由 
于 幻灯 片 采用 “固定 宽度 且 居 中 对 齐 、 两 边 留 白 使 用 对 应 的 背景 颜色 填充 ”的 兼 
容 策 略 ， 所 以 外 部 需要 获取 当前 幻灯 片 的 页 码 以 更 新 两 边 留 白 的 背景 颜色 。 

@ 当 鼠 标 滑 到 切换 按钮 上 时 ， 幻 灯 片 会 显示 相应 的 背景 图 片 ， 定 时 器 将 被 清除 ; 当 
和 鼠标 移出 切换 按钮 时 ， 定 时 器 将 会 重新 局 动 。 


8.3.2” 复 选 框 
同样 地 ， 我 们 先 来 看 一 下 复 选 框 的 页 面 表现 ， 未 选中 时 的 视图 如 图 8.10 所 示 。 


商品 


ex som 


十 诺 达 唾 言 护 厦 艾 入 加 热 女生 必 备 神器 


Ed 
= 七 喜 柠 标 味 页 履 次 料 吉 箱 330ml"24 保 第 装 


8.10 ”未 选中 时 的 复 选 框 
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选中 后 的 视图 如 图 8.11 所 示 。 


回 商品 


回 题 庄 达 组 宫 护 腰 艾 条 加 热 女 生 必 备 神器 


瑟 


回 二 七 喜人 标 味 破 酸 饮料 整 入 330mr24 促 销 半 


图 8.11 选中 时 的 复 选 框 


Checkbox.vue 中 的 代码 如 下 : 


<template> 
<span 
class="checkbox" 
:class="{active: value}" 
Q@click="toggleChecked"></span> 
</template> 
<script> 
export default { 
name: 'Checkbox', 
props: { 
value: { // @ 自 定义 v-model， 用 于 标识 复 选 框 状态 
type: Boolean， // 限制 传 入 值 为 Boolean 类 型 
default: false 
} 
$s 
methods: { 
toggleChecked () { 
// @@ 自 定义 v-model， 向 外 部 暴露 复 选 框 状态 值 
this.$emit ('input', !this.value) 
// 提供 change 方 法 供 父 级 监听 ， 当 复 选 框 状态 改变 时 触发 
this .Semit ('change') 
} 
} 
} 
</script> 
<style scoped> 
.Checkbox { 
position: relative; 
display: inline-block; 
width: 16px; 
height: 16px; 
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cursor: pointer; 
box-sizing: border-box; 
border: lpx solid #dcdfe6; 

} 

.Checkbox:after { 
position: absolute; 
width: 8px; 
height: 8px; 
top: 2px; 
left: 2px; 
content: ''; 
display: block; 

} 

.Checkbox:hover { 
border-color: #95bf47; 

} 

.Checkbox.active { 
border-width: 2px; 
border-color: #95bf47; 

} 

.Checkbox .active:after { 
background-color: #95bf47; 

} 

</style> 


@ 可 以 看 到 ， 在 Checkbox 组 件 中 ,笔者 并 没有 用 到 类 型 为 checkbox 的 input 元 素 ， 
而 是 使 用 span 及 其 伪 类 元 素 after 模拟 了 一 个 复 选 框 ， 并 使 用 预 置 样式 的 类 名 和 
动态 类 名 赋予 复 选 框 在 选中 和 未 选中 时 不 同 的 外 观 。 

@ 笔者 为 Checkbox 组 件 定义 了 v-model 指令 ， 在 复 选 框 状 态 改变 时 ， 组 件 将 向 外 
部 同步 状态 值 ， 并 触发 change 事件 。 

到 这 里 ， 线 上 商城 的 章节 告 一 段落 ， 相 关 代码 将 会 随 书 附 赠 。 笔 者 建议 同学 们 参照 

代码 进行 学 习 ， 这 样 也 许 会 更 轻松 。 
下 一 章 ， 我 们 将 进入 企业 官网 的 实战 开发 课程 。 
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想必 不 少 同学 家 里 有 车 ， 或 者 多 多 少 少 有 些 买 车 的 想法 吧 。 偶 尔 看 见 路 边 的 限 
量 版 豪 车 ， 是 否 也 有 种 心动 的 感觉 ， 想 象 着 自己 身 处 其 中 的 情景 。 现 在 ， 机 会 来 了 ! 

本 章 案例 将 实战 开发 一 家 公司 “租车 行 ”的 企业 官网 ， 这 家 公司 推出 的 “租车 
行 ”APP 连接 了 豪 车 车 主 和 大 众 用 户 ， 用 户 在 登录 和 认证 之 后 ， 即 可 浏览 并 选择 心 
仪 的 车 辆 , 发 起 租车 请 求 。 即使 你 不 为 豪 车 而 来 , 在 这 里 , 选 租 一 辆 代步 车 也 是 可 以 的 。 

这 家 企业 自然 是 笔者 杜撰 的 。 不 过 ， 也 不 用 灰心 ， 咱 学 好 技术 自己 去 买 辆 好 车 。 
本 章 案例 重 在 描述 如 何 开 发 一 个 可 中 英 双 语 切换 、 响 应 式 适 配 移动 和 PC 双 端 的 企业 
官网 。 下 面 ， 我 们 一 起 进入 实战 内 容 。 


9.1 响应 式 设 计 
先 来 简单 了 解 一 下 作为 本 节 核心 知识 点 的 响应 式 设计 的 概念 。 


9.1.1 响应 式 设计 


响应 式 设计 是 Ethan Marcotte 在 2010 年 5 月 提出 的 概念 ， 这 里 的 响应 指 的 是 网 页 能 
够 在 不 同 尺 寸 和 类 型 的 设备 上 作出 不 同 的 表现 。 一 个 经 过 精心 设计 的 响应 式 页 面 ， 可 以 
在 多 种 设备 上 提供 舒适 美观 、 易 于 交互 的 界面 和 良好 的 用 户 体 验 ， 达 到 “Once write， 
run everywhere” 的 效果 。 这 个 概念 是 为 了 服务 移动 互联 网 而 诞生 的 。 

随 着 大 屏幕 移动 端 设备 (如 iPad 等 ) 的 普及 ， 越 来 越 多 的 网 站 在 架构 和 开发 时 采用 
响应 式 设计 。 而 随 着 越 来 越 多 的 人 使 用 这 个 技术 ， 我 们 不 仅 从 中 看 到 很 多 创新 ， 还 看 到 
了 一 些 成 形 的 设计 模式 。 

最 初 ， 响 应 式 设计 的 概念 是 用 于 CSS 3 中 的 ， 通 过 媒体 查询 (Media Query) 判断 设 
备 类 型 ， 进 而 对 不 同 的 设备 设置 相应 的 样式 表 。 而 在 实际 开发 中 ， 很 多 开发 者 也 会 使 用 
JS 对 设备 类 型 进行 补充 判断 ， 比 如 使 用 JS 可 以 精准 判断 设备 是 安 卓 还 是 苹果 iOS 系统 ， 
这 是 CSS 3 媒体 查询 无 法 做 到 的 。 又 因为 可 以 通过 JS 获取 文档 元 素 并 对 其 设置 样式 ， 所 
以 使 用 JS 来 控制 设备 的 视图 表现 也 属于 响应 式 设计 。 

下 面 ， 笔 者 将 对 这 两 种 方式 分 别 进行 讲解 。 
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9.1.2 ”媒体 查询 


媒体 查询 中 最 核心 的 内 容 就 是 media。media 是 什么 呢 ? 简单 地 说 ， 这 是 一 个 关键 字 ， 
我 们 通过 它 来 判断 不 同 的 设备 类 型 ， 并 在 其 代码 块 中 预定 义 DOM 元 素 的 样式 。 当 设备 
属性 符合 一 个 media 判定 时 ， 元 素 将 采用 其 代码 块 中 的 样式 。 

媒体 查询 应 该 如 何 使 用 呢 ? 我 们 先 来 了 解 一 下 其 语法 ， 代 码 如 下 : 

@media media type andlnot1lonly (exp) { 


/* CSS 代 码 */ 
} 


其 中 ，media type 代表 媒体 类 型 ， 可 选 的 值 如 表 9.1 所 示 。 


表 9.1 媒体 查询 可 选 的 设备 类 型 


i 
手持 设 和 


ma 
EE 


exp 为 条 件 表达 式 ， 可 用 的 值 如 表 9.2 所 示 。 


表 9.2 媒体 查询 表达 式 可 用 的 值 


width <length> | 视 丝 习 莫 / 角 措 设 备 | yes | 守 六 入 次 和 中风 四 可 
height -eagth> | 视觉 屏 碍 1 角 摸 设备 | 。 yes | 是 区 
device-width <length> 视觉 屏幕 /触摸 设备 3 出 设备 中 屏幕 可 
device-height <length> | 视 蛇 习 医 / 般 挤 设备 | 。 yes | 完 训 和 由 设备 中 有 大 可 
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续 表 


媒体 特性 可 采用 的 值 可 用 类 型 可 否 min/max 简 介 
orientation portrait landscape 位 图 介质 no 外 


aspect-ratio <ratio> 定义 浏览 器 的 长 宽 比 
device-aspect-ratio <ratio> 定义 屏幕 的 长 宽 比 
定义 输出 设备 彩色 原件 
color <integer> 觉 数目 ， 如 非 彩色 设备 ， 
值 为 0 


视觉 媒体 
定义 输出 设备 的 彩色 查 
color-index <integer> Cp tt 
值 为 0 
定义 在 一 个 音色 框架 组 
monochrome <integer> yd a 
单 色 设备 ， 值 为 0 


96dpi 
定义 电视 类 设备 的 扫描 
progressivelinterlace 电视 类 型 二 的 的 
示 隔 行 扫描 
查询 输出 设备 是 否 使 用 
EE 是 ，0 代表 否 


and、not、only 为 连接 符号 ， 含 义 如 表 9.3 所 示 。 


表 9.3 媒体 查询 中 的 连接 符号 


关键 字 说 明 
only 限定 某 种 设备 
not 


| md | 加 加 与 ,连接 设 和 名 或 表达 式 
排队 i 
Rt | 


| wf | 扣除 某 种 设 各 
| .| 未 设 %7I 


之 后 ,我 们 可 以 在 引入 样式 表 文件 时 或 在 样式 表 中 直接 使 用 媒体 查询 , 示例 代码 如 下 : 
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<!-- 1. 引入 位 置 --> 
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 
415px), only screen and (max-device-width: 41l5px)" href="index.css"/> 


<!-- 2. 样式 表 中 --> 
<style> 
@media screen and (min-width: 415px) and (max-width: 1368px) { 
-header { 
height: 80px; 
} 
} 
</style> 


常见 的 手机 屏 宽 不 会 超过 415px， 屏 宽 超过 1368px 的 设备 一 般 是 大 屏 计 算 机 ， 多 为 
台式 机 。 


9.1.3 JS 布局 


使 用 JS 进行 响应 式 设计 可 以 看 作 一 记 偏 招 , 除了 JS 对 设备 类 型 的 判断 更 为 精准 之 外 ， 
由 于 CSS 缺乏 成 熟 的 计算 体系 〈 只 赁 calc 是 完全 不 够 的 ) ， 在 布局 需要 复杂 计算 时 ，JS 
也 是 必 不 可 少 的 。 

下 面 来 看 一 个 使 用 JS 判断 设备 类 型 (判断 设备 使 用 iOS 还 是 Android 系统 ) 的 示例 ， 


代码 如 下 : 
computed: { 
isAndroid () { 


// navigator 为 浏览 器 内 置 对 象 

// 此 处 通过 navigator .userAgent 获 取 用 户 的 设备 信息 

let u = navigator.userAgent 

return u.indexof ('Android') > -1 || u.indexOof('Adr') > -1 
}, 
isI08 你 + 

let u = navigator.userAgent 

// !! 为 两 次 ! 的 判定 ， 当 内 容 不 为 nul1、undefined、 空 串 等 ) 时 ， 判 定 为 真 

return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) 

} 
} 


这 段 代 码 通过 用 户 的 设备 信息 中 是 否 含有 特定 关键 字 来 判断 设备 类 型 ， 这 种 一 种 极 
为 常见 的 做 法 ， 不 过 媒体 查询 却 无 法 做 到 这 一 点 。 

之 后 ， 我 们 可 以 根据 这 两 个 计算 属性 使 用 动态 类 名 、 动 态 样式 或 直接 使 用 JS 等 方式 
为 DOM 元 素 设置 样式 。 
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9.2 页 面 开 发 


本 章 所 演示 的 网 站 其 实 只 有 单 屏 页 面 ， 却 巧妙 地 展示 了 4 页 内 容 ， 那 么 笔者 是 以 何 
种 方式 来 切换 视图 的 呢 ? 
在 本 节 中 ， 笔 者 将 讲解 有 关 页 面 开发 的 内 容 。 


9.2.1 页 面 切换 


随便 打开 几 个 企业 官网 ， 我 们 可 以 发 现 它们 大 都 采用 同一 种 布局 方式 一 “项 部 导 
航 栏 + 内容 区 ”， 即 使 是 互联 网 大 公司 也 不 例外 ， 如 图 9.1 所 示 。 


二 网 当天 地 甸 才 ， 认 站 件 生硬 多 ;从 闻 由 吧 隐 从 50%。 <。 三 直 SI 
peo s+ ne werner A i” siernmpriy 


图 9.1 阿里 云 首页 


户 可 以 通过 顶部 导航 栏 轻松 切换 页 面 的 内 容 、 跳 转 到 其 他 网 站 或 者 执行 注册 登录 
等 操作 。 内 容 区 则 是 用 户 查看 信息 和 执行 交互 的 主要 场所 ， 如 果 将 整个 网 页 看 作 一 篇 文 
章 的 话 ， 那 么 每 一 块 内 容 即 是 其 中 的 章节 。 
许多 网 站 习惯 将 多 个 内 容 区 从 上 到 下 组 合成 一 个 长 页 面 ， 通 过 滑动 滚动 条 来 切换 浏 
览 器 视窗 的 位 置 。 不 过 ， 有 些 网 站 也 会 另辟蹊径 ， 引 入 类 似 Swiper 之 类 的 组 件 ， 将 页 面 
设计 为 单 屏 ， 并 以 幻灯 片 翻 页 的 方式 来 切换 视图 ， 以 获得 更 好 的 视觉 效果 ， 本 项 目 采 
的 也 是 这 种 方式 。 


|76 。 vue.js 从 入 门 到 项 目 实战 | 
首先 ， 我 们 来 看 一 下 如 何 引入 Swiper。 


9.2.2 ”Swiper 组 件 


在 GitHub 上 有 许多 开源 免费 的 组 件 和 库 供 我 们 学 习 和 使 用 ， 这 些 组 件 和 库 是 由 专业 
的 人 开发 和 封装 好 的 ，Vue 也 是 其 中 一 员 ， 我 们 只 需要 了 解 如 何 引 入 和 使 用 它们 即 可 。 
当然 ， 如 果 有 兴趣 的 话 ， 你 也 可 以 封装 和 发 布 一 些 好 玩 的 东西 供 别人 学 习 和 使 用 。 

你 可 以 在 官网 上 (http: //www.swiper.com.cn〉 下载 Swiper 的 代码 ， 并 以 静态 脚本 的 
方式 引入 和 使 用 它们 ， 示 例 代码 如 下 : 

<!-- css 文 件 --> 


<link rel="stylesheet" href="path/to/swiper.min.css"> 
<div class="swiper-container"> 
<div class="swiper-wrapper"> 
<div class="swiper-slide"></div> 
<div class="swiper-slide"></div> 


</div> 
</div> 
<!-- js 文件 --> 
<script src="path/to/swiper.min.js"></script> 
<script> 


/* 创建 一 个 简单 实例 ， 元 素 选择 器 可 以 设置 为 其 他 类 名 ， 但 元 素 类 名 必须 包含 swiper- 
Container */ 

let sw = new Swiper('.swiper-container') 
</script> 


不 过 ， 笔 者 更 推荐 使 用 npm 来 安装 Swiper， 尤 其 是 在 Vue CLI 快速 构建 的 项 目 中 。 
安装 Swiper 的 命令 如 下 : 


cnpm install swiper --save-dev 


之 后 ， 我 们 可 以 在 相关 组 件 中 引入 和 使 用 它 ， 示 例 代码 如 下 : 


<template> 
<div class="swiper-container rc-body"> 
<div class="swiper-wrapper"> 
<div class="swiper-slide"> 
<!-- 单 页 内 容 区 域 --> 
</div> 
<div class="swiper-slide"></div> 
</div> 
</div> 
</template> 


<script> 
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import Swiper from 'swiper' 
import 'swiper/dist/css/swiper.min.css" 
export default { 
mounted () { 
this.s$nextTick(function () { 
new Swiper('.rc-body', { 
speed: 800，// 翻 页 速度 
direction: "vertical'， // 排列 方向 
paginationClickable: true， // 分 页 符 是 否 可 点 击 
mousewheel: true， // 是 否 可 用 滚轮 翻 页 
pagination: { // 分 页 符 
el: '.swiper-pagination"' 
}, 
on 


| 

// 当 翻 页 开始 时 触发 
slideChangeTransitionstart () {}, 
// 当 翻 页 结束 时 触发 


slideChangeTransitionEnd () {} 


}) 
} 
} 
</script> 


@ 我 们 需要 将 单 页 内 容 放 入 swiper-slide 类 名 所 在 的 区 域 中 , 每 一 页 对 应 一 个 区 域 。 

@ 在 定义 Swiper 对 象 时 有 很 多 配置 项 可 供 选择 ， 笔 者 在 示例 中 只 演示 了 最 基本 的 
配置 ， 而 实际 上 Swiper 的 功能 还 要 更 加 强大 ， 你 可 以 在 官网 查看 其 文档 和 相关 
示例 。 


9.2.3 划分 内 容 区 


在 划分 内 容 区 的 同时 ， 笔 者 还 将 提取 出 每 一 块 内 容 区 所 涉及 的 变量 。 

网 站 首 屏 一 般 都 会 设计 一 个 具有 冲击 力 的 特效 ， 本章 项 目 也 不 例外 。 当 页 面 加 载 时 ， 
标题 以 渐 淡 的 方式 进入 ， 用 户 数 量 从 0 滚动 到 目标 值 ; 当 资 源 加 载 完毕 ， 页 面 将 呈现 旋 
转 着 的 星空 特效 。 这 部 分 内 容 属 于 HTML+CSS+JS 的 基本 运用 ， 笔 者 不 再 多 说 ， 之 后 将 
附 赠 项 目 源 码 ， 感 兴趣 的 同学 可 以 查看 源码 。 

顶部 的 Header 〈 各 页 共享 栏 ) 所 涉及 的 变量 包括 logo 和 slogan 的 图 片 路 径 。 内 容 区 
涉及 的 变量 包括 按钮 文本 、 标 题 、 副 标题 、 背 景 星 空 和 前 景 汽车 的 图 片 路 径 。 第 一 页 的 
视图 表现 如 图 9.2 所 示 。 


和 178。 vue.js 从 入 门 到 项 目 实战 | 


六 租车 行 


干 款 车 型 限量 豪 车 任 你 选择 


干 坎 车 型 限 呈 家 车 任 你 选择 
15374 


9.2 幻灯 片 第 一 页 


第 二 页 用 于 介绍 “租车 行 ”的 使 用 方法 ， 涉 及 的 变量 包括 : 宣传 标题 、 步 又 标签 、 
步骤 简介 、 按 钮 文本 、 步 骤 的 配 图 路 径 。 第 二 页 的 视图 表现 如 图 9.3 所 示 。 


蒋 租车 行 


内 4 少 ,大 车 轻松 棚 回 家 
只 需 4 步 ， 泰 车 轻松 租 回 家 


9.3 幻灯 片 第 二 页 


第 三 页 用 于 展示 已 入 驻 “ 租 车 行 ”的 豪 车 ， 目 的 在 于 吸引 用 户 加 入 ， 涉 及 的 变量 包 
括 宣传 标题 、 豪 车 列表 对 象 〈 包 括 名 称 、 车 主 、 发 布 日 期 ) 、 配 图 路 径 列 表 。 第 三 页 的 


视图 表现 如 


图 9.4 所 示 。 


第 四 页 也 是 一 个 比较 酷 炫 的 动画 ， 动 画 设计 的 关键 在 于 对 transform 和 keyframes 的 


理解 和 运 | 


， 这 些 均 属于 CSS 的 基本 知识 ， 感 兴趣 的 同学 可 以 查看 源码 。 这 部 分 涉及 的 
变量 只 有 结 


束 语 。 第 四 页 的 视图 表现 如 图 9.5 所 示 。 
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同和 和 


i 
E> 
= 


众多 车 型 ,总 有 一 
am 


9.4 幻灯 片 第 三 页 


催 租车 行 
期 待 你 的 加 入 ! 黄 待 你 的 加 入 ! 
i - LU A 
Me 


9.5 幻灯 片 第 四 页 


有 的 同学 可 能 会 有 疑问 ， 为 什么 要 把 这 些 静 态 的 内 容 提取 出 来 呢 ? 直接 写 在 DOM 
结构 中 不 就 可 以 了 吗 ? 

对 于 普通 的 网 站 来 说 的 确 可 以 , 但 笔者 准备 的 架构 却 是 允许 用 户 多 语种 切换 的 网 站 ， 
对 于 关键 信息 的 提取 正 是 多 语种 网 站 建设 的 关键 。 


9.3 多 语种 网 站 的 建设 


上 节 中 ， 我 们 已 经 把 幻灯 片 各 页 的 信息 提取 出 来 了 。 在 本 节 内 容 中 ， 笔 者 将 讲解 如 
何 把 这 些 信息 纳入 配置 并 应 用 在 中 英 双语 网 站 的 建设 中 。 


和 8 上 ”Vue. js 从 入 门 到 项 目 实战 | 


9.3.1 将 一 切 纳入 配置 


在 之 前 的 章节 中 ， 我 们 有 提 到 过 Web 的 发 展 经 历 了 从 静态 到 动态 的 过 程 。 在 那 时 ， 
后 台 使 用 模板 引擎 的 机 制 ， 将 占 位 符 〈 如 S{fusemame} ) 置 于 动态 数据 的 位 置 ， 当 需要 响 
应 请 求 时 ， 再 用 具体 数据 蔡 换 模板 中 的 占 位 符 ， 并 返回 演 染 好 的 页 面 。 

抽象 地 看 ， 如 果 不 考 虑 数据 来 源 问题 的 话 ， 双 向 数据 绑 定 的 机 制 也 大 同 小 异 ， 它 无 
非 是 将 数据 请 求 和 响应 的 过 程 置 于 前 端 。 当 用 户 改变 对 象 状态 时 ， 可 以 看 作 这 里 发 生 了 
一 次 请 求 ， 对 象 及 与 之 相关 的 所 有 对 象 的 状态 值 被 改变 ， 之 后 引擎 会 将 模板 中 有 相关 变 
量 占 位 的 所 有 地 方 重新 泻 染 ， 并 直接 呈现 〈 响 应 ) 在 页 面 上 。 

而 数据 一 方面 来 自用 户 的 直接 输入 ， 如 从 Input、CheckBox 等 组 件 中 获取 的 值 ， 另 
一 方面 ， 来 自 开发 者 在 浏览 器 端 预 定义 的 数据 ， 笔 者 称 之 为 “配置 项 ”。 当 然 ， 选 择 哪 
部 分 数据 投入 使 用 ， 最 终 还 是 取决 于 用 户 操作 。 

如 此 一 来 ， 多 语种 的 切换 简直 易如反掌 ， 只 要 把 需要 切换 的 地 方 换 成 占 位 符 即 可 。 
当 用 户 选择 中 文 时 ， 即 用 中 文 信息 替换 占 位 符 ， 当 用 户 选择 其 他 语言 时 ， 也 同样 用 相应 
的 信息 替换 占 位 符 。 而 Vue 的 插值 绑 定 恰好 提供 了 这 样 一 种 占 位 符 。 

在 9.2 节 中 ， 笔 者 已 经 把 需要 多 语种 切换 的 信息 提取 出 来 了 ， 现 在 我 们 只 需要 将 其 
纳入 配置 。 

其 中 ， 有 一 些 信息 是 中 英 双语 可 以 共用 的 ， 配 置 代码 如 下 : 


export default { 


GALAXY REAL BG: './static/images/rent car 12.png', 
GALAXY LAYER BG: './static/images/rent car 14.png', 
GALAXY REAL TOP: './static/images/rent car 10.png', 
GALAXY LAYER TOP: './static/images/rent car 11.png'， 
DRIVE STAGE BG: './static/images/rent car 14.png', 
DRIVE STAGE ACTOR: './static/images/rent car 26.png', 
CARS_ PATH: [ 


'/static/images/rent car 40.png', 

'/static/images/rent car 42.png', 

'/static/images/rent car 44.png', 

'/static/images/rent car 46.png' 
] 


有 一 些 信 息 属 于 媒体 资源 ， 配 置 代码 如 下 : 


export default { 
chinese: { 
LOGO PATH: './static/images/rent car lo0go03.png', 
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SLOGAN PATH: './static/images/rent car 70.png', 
STEPS ACTOR PATH: [ 
'./static/images/rent car 52.png', 
'./static/images/rent car 54.png', 
'./static/images/rent car 56.png', 
'./static/images/rent car 57.png' 
] 
}, 
english: { 
LOGO_ PATH: './static/images/rent car 1ogo06.png'， 
SLOGAN PATH: './static/images/rent car 69.png', 
STEPS ACTOR PATH: [ 
'./static/images/rent car 51.png', 
'./static/images/rent car 53.png', 
'./static/images/rent car 55.png', 
'./static/images/rent car 57.png'" 
] 
} 
} 


剩 下 的 都 是 文本 信息 ， 配 置 代码 如 下 : 


export default { 
chinese: { 

TITLE: ' 租 车 行 '， 

TRY_LABEL: ' 立 即 体验 '， 

DOWNLOAD _LABEL: "立即 下 载 '， 

AUTH_LABEL: "立即 认证 '， 

DETAIL LABEL: ' 详 细 内 容 '， 

MORE LABEL: ' 更 多 '， 

STEP_LABEL: "步骤 ' ， 

OWNER_LABEL: ' 所 有 者 '， 

DATE_LABEL: ' 发 布 日 期 '， 

CARS_TOOLTIP: ' 点 击 查看 详情 '， 

STEPS_ PROFILE: [ 
"打开 应 用 商城 ， 下 载 并 安装 "租车 行 ” APP，" 掌 握 "租车 神器 '， 
"注册 成 为 租车 行 的 会 员 ， 并 提交 信用 和 资产 认证 '， 
"登录 APP， 选 择 你 心仪 的 车 型 ， 发 起 租车 请 求 "， 
"我 们 的 工作 人 员 会 将 租 到 的 车 辆 开 到 的 指定 地 点 交付 给 你 " 


CARS PROFILE: [ 
{ 
NAME : ' 虚 拟 豪 车 梅 上 表达 姆 '， 
OWNER: ' 哈 肯 - 维 姆 - 莱 '， 
DATE: '2018-04-20" 
ky 


人 | 
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NAME : “虚拟 豪 车 瑞 恩 戴尔 '， 
OWNER: ' 瑞 安 - 达 尔 '， 
DATE: '2018-04-20' 


NAME : ' 虚 拟 豪 车 拉 布 拉 多 '， 
OWNER: ' 拉 斯 穆 斯 - 勒 多 夫 '， 
DATE: '2018-04-20" 


NAME : ' 虚 拟 豪 车 库 吉 特 '， 
OWNER: ' 蒂 姆 - 伯 纳 斯 - 李 '， 
DATE: '2018-04-20" 


PAGE_ONE_SLOGAN: ' 千 款 车 型 限量 豪 车 任 你 选择 '， 
PAGE ONE SUB_ SLOGAN: "位 用 户 选择 了 租车 行 ，， 
PAGE TWO SLOGAN: ' 只 需 4 步 ， 豪 车 轻松 租 回 家 
PAGE THREE SLOGAN: ' 众 多 车 型 ， 总 有 一 款 合 你 心意 
PAGE_FOUR_SLOGAN: ' 期 待 你 的 加 入 ! ' 


}， 
english: { 
TITIE: Rent A Car’, 
TRY LABEL: "Take a Try', 
DOWNLOAD LABEL: "Download'"， 
AUTH LABEL: 'Authentication', 
DETAIL LABEL: 'details', 
MORE LABEL: ‘'more', 
STEP_ LABEL: 'Step', 
OWNER LABEL: "Owner'， 
DATE LABEL: 'Date', 
CARS_ TOOLTIP: 'Click for more details."' 
STEPS PROFILE: [ 
"Open the App Store, download and install "Rent Car"', 


"Register and apply for the certification of credit and assets', 


"Make a request for your favorite car in the application'， 
"We will send the car to the spot appointed by you' 
]， 
CARS PROFILE: [ 
{ 
NAME: "Fictitious Car Mecoindum'， 
OWNER: 'Hakon Wium Lie', 
DATE: '2018-04-20" 
}, 


NAME: "Fictitious Car Vandaiur'， 
OWNER: "Ryan Dahl', 
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DATE: '2018-04-20" 


NAME: "Fictitious Car Abanledu', 
OWNER: 'Rasmus Lerdorf', 
DATE: '2018-04-20" 


NAME: 'Fictitious Car Keluite', 

OWNER: 'Tim Berners Lee', 

DATE: "2018-04-20" 

} 
]， 
PAGE ONE SLOGAN: 'Thousands of Limited Luxury Cars', 
PAGE ONE SUB SLOGAN: "users choosed Rent Car', 
PAGE TWO SLOGAN: 'Four steps to rent a car', 
PAGE THREE SLOGAN: 'Big Brand, Just the One', 
PAGE FOUR SLOGAN: 'Welcome to join us! ' 
} 
} 


现在 ， 所 有 的 信息 都 已 经 纳入 配置 。 之 后 ， 我 们 需要 做 的 是 将 配置 导入 组 件 并 绑 定 
到 视图 模板 上 。 


9.3.2 ”将 配置 绑 定 到 视图 


还 记得 上 一 小 节 中 配置 项 的 格式 吗 ? 
笔者 特意 将 所 有 中 文 和 英文 的 信息 分 别 放 在 chinese 和 english 对 象 下 ， 之 后 ， 我 们 
可 以 巧 用 computed 选项 来 取出 配置 信息 ， 代 码 如 下 : 


<script> 
import config from '../config' 
export default { 
data () { 
return { 
lang: 'chinese' // 标识 当前 的 语种 
} 
}, 
methods: { 
toggleLang (lang) { // 切换 语言 种 类 
this.lang = lang 
} 
}, 
computed: { 


// 使 用 计算 属性 获取 配置 数据 
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langs () { 
return config.langs[this.1lang] 
} 
} 
</script> 


这 里 还 需要 一 些 DOM 元 素来 控制 语种 开关 , 笔者 选择 了 一 种 简单 的 方式 , 代码 如 下 : 


<div class="rc-header-right"> 


<a 
href="#" 
:clas {'is-active': this.lang === 'chinese'}" 
Qclick="toggleLang ('chinese')"> 中 文 </a>&nbsp;/ 
<a 
Eee” 
:clas {'is-active': this.lang === 'english'}" 
@click="toggleLang('english')">English</a> 
</div> 


最 后 ， 我 们 需要 将 配置 信息 绑 定 到 组 件 模板 中 。 


<!-- 插值 绑 定 --> 
<h2>{ {langs.PAGE TWO SLOGAN}}</h2> 
<!-- 动态 样式 绑 定 --> 
<div 
:style="{backgroundImage: ‘'url(' + media.STEPS ACTOR PATH[stepIndex] 
i 
class="rc-bg rc-step-actor"></div> 
<!-- 列表 泻 染 --> 
<div 
Vv-for=" (step, index) in langs.SsTEPS PROFILE" 
:key="index" 
class="swiper-slide rc-step"> 
<div class="rc-step-content"> 
<h2 class="rc-step-title">{{langs.STEP LABEL}} {{index + 1}}</h2> 
<p class="rc-step-profile">{{step}}</p> 
<!-- 不 同 step 中 ， 使 用 条 件 泻 染 显 示 不 同 的 putton 组 件 --> 
<button 
class="btn" 
ref="pbdt" 
V-if="index === 0">{{langs.DOWNLOAD LABEL}}</button> 
<button 
class="btn" 
ref="pbat” 
VvV-if="index === 1">{{langs.AUTH LABEL}}</button> 
</div> 
</div> 


| 第 9 章 企业 官网 的 建设 989 


现在 ， 我 们 的 中 英 双语 网 站 就 建设 完成 了 。 当 项 栏 中 的 “中 文 ” 按 钮 被 激活 时 ， 网 
页 信息 以 中 文 显示 ， 如 图 9.6 所 示 。 


砚 租车 行 人 (的 各 人 二 拓 


只 需 4 步 ， 豪 车 轻松 租 回 家 


图 9.6 中 文 页 面 
当 项 栏 中 的 “English” 按 钮 被 激活 时 ， 网 页 信息 则 以 英文 显示 ， 如 图 9.7 所 示 。 


厅 Rent Car 


Four steps to rent a car 


9.7 英文 页 面 


到 这 里 ， 本 章 内 容 就 算 结束 了 。 在 本 章 中 ， 笔 者 重点 讲述 了 有 关 响 应 式 设 计 和 中 英 
双语 配置 的 知识 点 。 其 实在 笔者 眼中 ， 这 些 都 只 是 配置 的 运用 而 已 。 以 媒体 查询 为 例 ， 
开发 者 先 准备 好 各 种 类 型 设备 的 样式 表 配 置 , 当 设 备 符合 某 种 条 件 时 , 则 采用 对 应 的 配置 。 
这 是 一 种 泛 化 的 思维 ， 和 希望 能 够 帮助 一 些 同 学 提升 对 编程 的 理解 。 

在 下 一 章 中 ， 笔 者 将 讲解 如 何 打造 一 个 移动 端 资讯 类 Web 应 用 ， 对 于 HIML 十 CSS 十 
JS 基础 较 深 的 同学 来 说 ， 本 章 的 看 点 在 于 如 何在 Vue 中 集成 Vuex 组 件 。 
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随 着 生活 节奏 不 断 加 快 ， 利 用 碎片 化 时 间 来 获取 信息 已 经 成 为 都 市 青年 必 不 可 
少 的 技能 ， 一 些 资讯 类 应 用 也 随 之 迅速 发 展 起 来 。 
本 章 将 要 构建 的 也 是 一 种 资讯 类 应 用 一 一 移动 端 Web 新 闻 应 用 。 


10.1 应 用 介绍 


笔者 为 这 款 应 用 规划 了 几 张 原型 页 面 ， 下 面 先 来 看 一 下 这 些 页 面 的 视图 表现 及 部 分 
核心 功能 的 实现 。 


10.1.1 应 用 首 屏 


笔者 为 应 用 首 屏 准备 了 一 个 酷 炫 的 动画 ， 不 过 并 不 是 使 用 HIML+CSS 制作 的 ， 而 
是 用 到 了 一 张 GIF 动 图 。 许 多 时 候 ， 使 用 HTML+CSS 或 SVG 来 制作 动画 效果 并 不 是 良 
好 的 选择 , 即使 借助 于 其 他 工具 也 会 显得 过 于 烦琐 并且 动 效 的 视觉 表现 范围 十 分 有 限 。 
此 时 ， 不 妨 换 一 个 思路 ， 尝 试 一 下 使 用 视频 或 者 动 图 来 表现 视图 ， 这 也 是 许多 大 公司 网 
站 的 常见 做 法 。 动 画 的 结束 帧 将 呈现 应 用 的 名 称 ， 如 图 10.1 所 示 。 


图 10.1 首 屏 动画 结束 帧 
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之 后 ， 点 击 右 上 和 角 “ 点 击 进 入 ”按钮 将 进入 应 用 首页 。 


10.1.2 应 用 首页 
应 用 首页 的 视图 如 图 10.2 所 示 。 


推荐 ”热点 科技。 时政 体育。 财经 姓 乐 


刚刚 ， 全 球 首 个 56 电 话 打通 了 ! 


华为 新 机 充 取 :4000 万 入 卡 三 所 
+4800mAh+ 禹 模 980， 外 观 真 香 ! 
四 


一 再 令 下 ! 解放 军 30 架 战机 飞 往 境 
， 伟 高 层 : 期 竺 这 一 天 很 久 了 


饭 军 地 中 海 举行 联合 演习 派 战机 低空 
探 过 附近 美军 舰 


出 他 的 名 字 ， 并 表示 没有 之 一 
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10.2 应 用 首页 


在 该 页 面 中 ， 笔 者 从 上 到 下 设计 了 搜索 栏 、Tab 选项 卡 和 新 闻 列 表 三 块 内 容 。 新 闻 
列表 由 v-for 指令 根据 获取 的 数据 生成 ， 代 码 如 下 : 


<ul class="news-list"> 
Vv-for=" (item, index) in list" 
:key="index" 
class="news-item" 
@click="toNews (item) "> 
<div class="news-media"> 
<img class="news-thumbnail" :src="item.thumbnail"> 
<div class="news-profile"> 
<p>{{ item.title }}</p> 
<p class="news-mark"> 
<Badge v-if="item.isHot" text=" 热 点 "></Badge> 
<span>{{ item.source }}</span>gnbsp; &nbsp; 
<span>{{ item.time | supplyTime }}</span> 
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</p> 
</div> 
</div> 
</1i> 
</ul> 


其 中 ，list 是 数组 类 型 的 变量 ， 用 以 保存 获取 的 新 闻 列表 ， 数 组 元 素 的 格式 如 下 : 


{ 
wid": 0, 
"title": "刚刚 ， 全 球 首 个 5G 电 话 打 通 了 ! "， 
"thumbnail": "./static/images/i01-th.jpg"， // 缩 略 图 ， 资 源 放 在 项 目 根 目 
录 static 文 件 夹 下 
"source" : "雷锋 网 "， // 来 源 
"category": "科技 "， // 分 类 
"time": "2018-09-07 10:16:34", 
"isHot": true， // 标识 新 闻 是 否 是 热点 
"isRec": true // 标识 新 闻 是 否 被 推荐 
} 


supplyTime 是 笔者 定义 的 过 滤器 ， 用 以 将 日 期 转换 为 年 月 日 格式 ， 代 码 如 下 : 


filters: { 
supplyTime (value) { 
return value.substring(0，10) // 截 长 即 可 
} 
: 


Badge 是 一 个 自 定 义 徽章 组 件 ， 在 这 里 用 于 表现 “热点 ”标记 ， 组 件 代 码 如 下 : 


<template> 
<span 
class="badge" 
:style="{ color: color, borderColor: color, fontsize: fontsize 
}">{{ text }}</span> 
</template> 


<script> 
export default { 
name: "Badge'， 
props: { 
EDOLGOES 下 
default: '#d33d3e', 
validator (value) { 
return value.indexof ('#') = 一 0 && (value.length —= 4 || value. 
length === 对 
} 
]， 
te 荡 
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default: '" 

}, 

fontsize: { 
default: "12px" 


} 
小 
</script> 


<style scoped> 
-badge { 
padding-left: 3px; 
padding-right: 3px; 
border-width: lpx; 
border-style: solid; 
border-radius: 5px; 
} 
</style> 


当 我 们 点 击 单条 新 闻 时 ， 应 用 将 跳 转 到 新 闻 详 情 页 。 


10.1.3 ”新 闻 详 情 
新 闻 详 情 页 的 视图 如 图 10.3 所 示 。 


刚刚 ， 全 球 首 个 5G 电 话 打通 了 ! 


于 侨 网 9 月 7 日 消息 ， 据 外 媒 报 道 ， 通 过 与 高 通 合作 ， 
爱立信 利用 一 款 智能 手机 外 形 的 移动 设备 拥 打 了 全 球 
首 个 5G 电 话 。 


据 了 解 ， 首 个 5G 电 话 是 在 过 立信 位 于 瑞典 希 斯 纪 的 实 
又 室 打 出 的 ， 利 用 了 39GHz 毫 米 收 频 者 和 爱立信 商业 
化 5G NR Air 5331 革 站 ， 以 及 一 吉 采 用 高 通晓 龙 X50 
5G 调 制 解 词 器 和 无 线 子 模块 的 测试 设备 。 

与 此 同时 ， 爱 立信 与 高 通 这 两 家 公司 表示 ，" 访 实验 将 
为 符合 SG NR 标 准 的 基础 设施 、 智 能 手机 和 其 他 移动 
设备 的 上 市 铺 售 铺 平 道路 "。 此 外 ， 两 家 公司 还 谈 


图 10.3 新闻 详 情 页 
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这 里 有 一 个 问题 ， 其 实 每 条 新 闻 的 内 容 都 不 一 样 ， 或 许 插图 的 位 置 和 数量 不 一 ， 又 
或 许 包含 列表 等 特殊 元 素 ， 那 么 我 们 将 如 何 展 示 这 些 内 容 呢 ? 难道 每 一 条 新 闻 的 DOM 
代码 都 要 定制 吗 ? 

确实 ， 新 闻 的 DOM 结构 是 定制 的 ， 不 过 我 们 的 组 件 代 码 却 不 需要 重复 书写 ， 只 需 
要 使 用 v-html 指令 将 新 闻 的 DOM 结构 数据 表现 出 来 就 可 以 了 ， 代 码 如 下 : 


<div class="content"> 
<h2>{{ news.title }}</h2> 
<p class="news-profile">{{ news.source }}&nbsp;&nbsp;&nbsp;{{ news. 
time }}</p> 
<!-- 使 用 v-html 展 示 新 闻 内 容 --> 
<div v-html="news.content"></div> 
<ul> 
<1i class="keyword-item"><i class="fa fa-key"></i></1i> 
<1i 
Vv-for=" (keyword, index) in news.keywords" 
:key="index" 
class="keyword-item"> 
{{ keyword }} 
</1i> 
</ul> 
</div> 


news.content 即 是 新 闻 的 DOM 结构 数据 。 

这 是 一 种 比较 常见 的 做 法 , 但 在 安全 性 上 存在 很 大 问题 , 尤其 是 在 与 后 台 进行 交互 时 ， 
核心 数据 容易 泄露 ， 需 要 辅 以 一 些 保护 措施 ， 比 如 加 密 等 。 感 兴趣 的 同学 可 以 深入 研究 
一 下 如 何 更 好 地 呈现 动态 DOM 结构 ， 这 里 笔者 不 再 多 说 。 

当 点 击 顶 栏 中 的 搜索 按钮 时 ， 应 用 将 跳 转 到 搜索 页 面 。 


10.1.4 ”搜索 页 面 


搜索 页 面 的 视图 如 图 10.4 所 示 。 
在 搜索 页 中 , 用 户 可 以 在 输入 框 中 输入 关键 字 或 者 选择 “历史 记录 ”和 “ 猜 你 想 搜 的 ” 
列表 中 的 关键 字 以 搜索 标题 中 带 有 关键 字 的 新 闻 。 
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华为 新 机 
恒 大 全 面 大 降价 
中 国 最 厉害 的 后 卫 逢 安东尼 
应 采 儿 
冯 绍 峰 
地 中 海 


10.4 搜索 页 面 


笔者 使 用 window.localStorage 来 保存 用 户 曾 经 输入 过 的 关键 字 ， 即 历史 记录 中 的 关 
键 字 。 在 之 前 的 章节 中 ， 笔 者 已 经 讲 过 window.localStorage 的 用 法 ， 这 里 不 再 多 说 ， 下 
面 来 看 一 下 用 其 存 取 和 删除 历史 记录 中 的 关键 字 的 具体 代码 : 


getRecord () { // 读 取 记录 
let record = window.localSstorage.getItem('ztRecord') 
EE (record)y { 
this.recordKeywords = JSON.parse (record) .keywords 
} 
}, 
setRecord () { // 保存 记录 
window.localSstorage.setItem('ztRecord', JSON.stringify({ 
keywords: this.recordKeywords 
})) 
}, 
removeRecord () { // 删除 记录 
this.recordKeywords = [] 
window.localSstorage.removeItem('ztRecord') 


recordKeywords 是 被 定义 在 data 选项 中 的 变量 ， 用 以 动态 生成 历史 记录 区 块 。 当 用 
户 点 击 区 块 上 的 删除 图 标 时 ，removeRecord 方法 将 被 调用 ， 此 时 区 块 将 被 隐藏 ， 如 
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图 10.5 所 示 。 


华为 新 机 
恒 大 全 面 大 降价 
中 国 最 厉害 的 后 卫 
应 采 儿 
冯 绍 峰 
地 中 海 


回国 
分 词 


10.5 ”历史 记录 被 隐藏 后 


这 里 笔者 用 到 v- 计 指令 来 控制 区 块 的 显示 和 隐藏 ， 代 码 如 下 : 
<!-- 根据 历史 记录 关键 字 列表 是 否 为 空 进行 判断 --> 


<div class="search-banner" v-if="recordKeywords.length"> 
<div class="banner-title"> 


<span> 历 史记 录 </span> 


<i class="fa fa-trash btn-banner" @click="removeRecord"></i> 
</div> 


<ul class="keyword-1list"> 
1 


V-for=" (keyword, index) in recordKeywords" 
:key="index" 
class="keyword-item one-line" 


@click="toResultByRecord (keyword) ">{{ keyword }}</1i> 
</ul> 


</div> 


当 输 入 关键 字 并 点 击 “ 搜 索 ” 按 钮 或 选择 “历史 记录 ” 猜 你 想 搜 的 ”区 块 中 的 关键 字 时 ， 
应 用 将 跳 转 到 搜索 结果 页 。 
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10.1.5 ”搜索 结果 
搜索 结果 页 的 视图 如 图 10.6 所 示 。 


华为 新 机 亮 眼 ;4000 万 御 卡 三 摄 
+4800mAh+ 冉 及 980， 外 观 页 香 ! 


10.6 ”搜索 结果 页 


该 页 与 应 用 首页 相似 ， 不 过 并 未 加 入 Tab 选项 卡 ， 这 里 不 再 多 说 。 


10.2 项 目 构建 


关于 应 用 的 各 个 页 面 ， 笔 者 已 在 上 一 小 节 中 进行 过 讲解 。 不 过 ， 项 目 是 如 何 构建 成 
一 个 整体 的 呢 ? 
在 本 节 中 ， 笔 者 将 对 项 目的 构建 进行 详细 讲解 。 


10.2.1 项 目 结构 


该 项 目 也 是 由 Vue CLI 快 速 构建 而 成 的 ，src 目录 结构 如 图 10.7 所 示 。 
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> 

> MM components 
> Mdata 

> Mrouter 

> MM store 

> Mwidgets 

坊 App.vue 

是 mainjs 


图 10.7 src 目录 结构 


关于 components、router、assets、widgets、App.vue、main.js， 笔 者 就 不 再 多 说 了 。 
下 面 我 们 来 看 一 下 data、store 和 ajax 目录 的 作用 。 

在 这 里 ， 笔 者 引入 Vuex 并 试图 模拟 完整 的 前 后 台 交 互 流程 ， 其 中 data 目录 充当 着 
数据 库 的 角色 ， 里 面 存储 着 应 用 的 所 有 动态 数据 ， 如 图 10.8 所 示 。 


鲜 Projec ~ 巴 寺 | 亲 - 上 入 Ustjson - [NREC 
v Majax 
总 Categoyjs 
总 Ustjs 
是 Newsjs 
> Massets 


|， 全 球 首 个 56 电 话 打 通 了 ! "， 
/static/inages/101-th. jpg", 
9 


科技 
》 Mcomponents 99-67 19:116+34", 
Y Mdata 
缚 Categoryjson 2 , 
i nn ig": 1 
区 Newsjson title": “华为 所 机 亮 暖 。4998 万 扰 卡 三 摄 448eemah+ 贱 解 989， 外 观 声 知 1 "，， 
i 4 “thumbnail*: *./static/images/402-th.jpe”, 
v Mstore 1 
v Mmodules EE 
0 “isHot™: true, 
总 Categoryjs “isRec”: true 
吕 Lstjs 2 和 
六 Newsjs 2 "dn: 25 
indeijs "tttle": “一 声 仿 下 ! 解放 盏 39 困 规 机 飞 往 境外 ， 修 高 民 : 期 符 这 一 天 很 入 了 "， 
> Mwidgets da 


图 10.8 data 目录 中 的 文件 


Categoryjson 中 保存 着 新 闻 的 分 类 数据 ;Listjson 中 保存 着 新 闻 的 简介 数据 ，News. 
json 中 保存 着 新 闻 的 DOM 结构 数据 并 通过 id 字段 与 新 闻 的 简介 数据 建立 关联 。 

ajax 目录 负责 完成 与 后 台 接 口 的 对 接 ， 并 将 数据 导 流 到 Vuex 全 局 状态 管理 器 中 ， 下 
面 我 们 以 ajax/News.js 文件 为 例 进行 分 析 ， 文 件 代码 如 下 : 


import News from '@/data/News" 
import List from '@/data/List" 
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export default { 
getNews (cb, { id }) { 
setTimeout (() => { 


let profile = List.data.find (item => item.id === Number (id)) 

let detail = News.data.find (item => item.id === Number (id) ) 

cb(Object.assign(profile，detail)) // 使 用 object.assign 合 并 对 象 
}, 10) 


} 

首先 ， 笔 者 引入 了 data 目录 下 的 数据 ， 并 使 用 setTimeout 定时 器 来 模拟 异步 交互 ， 
然后 以 回调 函数 的 方式 将 匹配 参数 id 的 新 闻 数 据 导 出 。 在 这 里 ， 回 调 函数 cb 十 分 重要 ， 
笔者 将 在 调用 GetNews 方法 的 地 方 对 其 进行 定义 。 

还 记得 有 关 Vuex 的 知识 点 吗 ? 〈 请 复习 第 六 章 内 容 ) 

笔者 在 本 章 中 引入 Vuex， 用 以 演示 其 实战 用 法 ， 在 store 目录 中 存储 的 即 是 项 目的 
全 局 状态 管理 器 。 

这 里 ， 笔 者 采用 了 分 模块 的 使 用 方法 ， 使 每 一 个 数据 块 都 拥有 对 应 的 管理 模块 ， 并 
在 store/index.js 文件 中 将 其 整合 ，store/index.js 文件 的 代码 如 下 : 


import Vue from '"vue' 

import Vuex from ‘vuex' 

import Category from './modules/Category' 
import List from './modules/List' 

import News from './modules/News' 


Vue.use (Vuex) 


export default new Vuex.Storel({ 
modules: { 
Category, 
List, 
News 
} 
} 


在 文件 中 ， 笔 者 为 Vue 注册 了 Vuex 组 件 ， 并 为 Vuex.Store 挂 载 了 Category、List 和 
News 三 个 模块 。 
之 后 ， 我 们 将 在 mainjjs 中 引入 该 文件 ， 并 为 Vue 实例 挂 载 store 对 象 ， 代 码 如 下 : 


import Vue from ‘'vue' 

import App from './App' 
import router from './router' 
import store from './store" 
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import '@/assets/stylesheets/base.css' 
import 'font-awesome/css/font-awesome.min.css' 


Vue.config.productionTip = false 


/* eslint-disable no-new */ 
new Vue ({ 
el: "#app'v 
router, 
store, 
components: { App }, 
template: '<App/>"' 
} 


下 面 ， 我 们 以 store/modules/Newsjs 为 例 来 看 一 下 全 局 状态 管理 器 中 的 模块 是 如 何 定 
义 的， 文件 代码 如 下 : 


import ajax from '@/ajax/News' 


const state = { 
news: [] 
} 


const getters = { 
news: state => state.news 
} 


const mutations = { 
setNews (state, news) { 
state.news = news 
} 
} 


const actions = { 
getNews ({ commit }, payload) { 
ajax.getNews (news => { // 以 匿名 方式 声明 回调 函数 
commit ('setNews', news) 
}, payload) 
} 


export default { 
namespaced: true， // 声明 为 独立 命名 空间 
state, 
getterss 
mutations, 
actions 
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由 actions 进行 异步 交互 并 将 获取 的 数据 传 入 mutations 以 设置 state 中 的 状态 ， 之 后 
再 由 getters 衍生 数据 链 ， 这 即 是 Vuex 模块 运行 的 完整 流程 。 

在 这 里 ， 笔 者 调用 了 模拟 的 后 台 交 互 接 口 GetNews， 该 方法 被 声明 在 上 文中 提 到 过 
的 ajax/News.js 文件 中 。 笔 者 为 GetNews 定义 的 回调 函数 用 于 提交 mutations， 以 将 获取 
的 数据 传 入 state。 

之 后 ， 笔 者 将 在 新 闻 组 件 中 调用 该 模块 ， 相 关 代码 如 下 : 


<script> 
import { mapGetters, mapActions } from ‘vuex' 
export default { 
name: 'NewsPage', 
mounted () { 
this.$nextTick(function () { 
this .getNews ({ 
id: this.$route.query.id // 获取 地 址 栏 路 径 中 的 id 参数 
} 
}) 
}, 


computed: { 
.. .mapGetters('News', ['news']) 
}, 
methods: { 
.. .mapActions('News', ['getNews']) 
} 
} 
</script> 


在 本 节 内 容 中 , 笔者 讲述 了 在 Vue 项 目 中 集成 Vuex 的 一 套 成 熟 流程 。 在 实际 开发 中 
我 们 只 需要 将 ajax 目录 下 的 代码 改 成 真正 与 后 台 交 互 的 AJAX 请 求 即 可 ， 其 他 部 分 根据 
实际 需求 “ 依 样 画 葫芦 ”。 

也 许 有 的 同学 会 有 疑问 ， 为 什么 要 划分 这 么 多 层次 呢 ? 直接 在 Vue 组 件 中 进行 
AJAX 交互 不 就 可 以 了 吗 ? 

确实 , 我 们 的 确 可 以 在 组 件 中 直接 进行 AJAX 交互 , 静态 数据 也 可 以 直接 放 在 组 件 中 。 
但 在 开发 多 人 协作 的 大 型 复杂 应 用 时 ， 这 种 做 法 是 非常 不 明智 的 。 

首先 ， 在 处 理 跨 组 件 和 分 散 的 状态 管理 、 状 态 追 踪 时 ， 全 局 状态 管理 器 至 关 重 要 ; 
其 次 ,使 用 全 局 状态 管理 器 也 可 以 有 效 减轻 视图 组 件 的 负担 ， 而 分 层次 的 开发 架构 可 以 
将 一 致 的 操作 集中 在 一 起 管理 , 还 可 以 减轻 其 他 层次 的 重量 。 这 些 均 是 有 利于 项 目 维护 、 
重 构 、 二 次 开发 的 最 佳 实践 。 也 许 当 前 你 并 没有 切身 体会 ， 但 平时 养 成 的 良好 习惯 必 将 
会 使 你 在 身 处 更 高 舞台 时 游 丸 有 余 。 
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10.2.2 ”数据 流 图 
笔者 简单 绘制 了 一 张 数据 流向 示意 图 ， 如 图 10.9 所 示 。 


后 台 ajax 层 Store 视图 
Getter 
f 组 件 
Stare [| 
个 DOM 
数据 库 Mutation 
不 
后 台 接 口 说 数据 接口 并 Action 
图 10.9 数据 流向 


这 是 笔者 推荐 的 一 种 在 Vue 项 目 开发 中 集成 Vuex 的 架构 模型 。 当 然 ， 这 只 是 一 种 


选择 ， 仅 供 参考 。 


到 这 里 ， 本 章 内 容 已 经 基本 结束 了 。 在 本 章 中 ， 笔 者 用 到 的 都 是 Vue 的 基本 功能 和 
语法 ， 最 重要 的 知识 点 是 Vuex 的 集成 。 之 后 ， 项 目 源码 将 随 书 附 赠 ， 希 望 同学 们 能 够 查 


看 和 练习 一 下 。 


在 下 一 章 中 ， 笔 者 将 使 用 Vue 和 SVG 制作 一 个 PC 端 工具 类 网 站 一 一 SVG 画图 板 ， 
有 SVG 基础 的 同学 可 以 先 尝试 规划 一 下 自己 的 开发 方案 。 
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想必 同学 们 在 日 常生 活 和 学 习 中 一 定 接触 过 如 Office Online、Process On、 易 企 
秀 等 工具 类 网 站 。 这 类 网 站 所 起 到 的 作用 虽然 在 桌面 应 用 中 一 样 能 实现 ， 但 正如 B/S 
架构 优 于 C/S 架构 的 地 方 ， 其 随处 可 用 〈 免 下 载 、 免 安装 、 免 升级 ) 的 优点 依然 吸引 
了 大 量 用 户 。 

本 章 要 讲述 的 就 是 一 个 工具 类 网 站 一 一 SVG 画图 板 ， 下 面 进入 章节 内 容 。 


11.1 SVG 简介 


对 于 具备 SVG 基础 的 同学 来 说 ， 本 章 内 容 应 该 并 不 复杂 。 而 对 SVG 不 熟悉 的 同学 
也 不 必 担 心 ， 本 节 将 先 讲述 用 到 的 SVG 知识 点 。 


11.1.1 有 关 SVG 的 三 个 问题 


笔者 之 前 听 到 过 一 句 话 : “认识 新 事物 的 正确 方法 ， 是 要 搞 清楚 三 个 问题 ， 是 什么 
(what/who) ? 为 什么 用 (why) ? 怎么 用 (how) ? ”笔者 将 带 着 这 三 个 问题 开始 讲解 
本 节 的 内 容 。 

SVG 是 什么 ? 

简单 地 说 ，SVG (Scalable Vector Graphics， 可 伸缩 矢量 图 形 ) 是 一 种 基于 XML 的 
图 片 格式 ， 它 的 图 片 质量 在 尺寸 放大 或 缩小 时 并 不 会 损失 。 

为 什么 要 用 SVG ? 

SVG 作为 图 片 格式 的 最 大 优点 在 定义 中 已 经 提 过 ， 即 它 是 可 伸缩 的 ， 在 放大 和 缩小 
时 ， 图 片 质量 不 会 下 降 。 

其 次 , 由 于 SVG 基 于 XML 生成 , 所 以 开发 者 可 以 将 SVG 元 素 作 为 DOM 元素 处 理 ( 意 
味 着 可 以 使 用 JS 和 CSS 代码 来 控制 SVG 中 的 元 素 ), 甚至 可 以 在 记事 本 中 编辑 SVG 图 片 。 

除 此 之 外 , 各 家 浏览 器 的 兼容 ( 除 正 8 以 下 版 本 ) 也 是 让 SVG 被 广泛 使 用 的 重要 因素 。 

那么 ， 怎 么 使 用 SVG 呢 ? 我 们 先 来 看 一 个 简单 的 示例 ， 代 码 如 下 : 


<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.o0rg/Graphics/sVvG/1.1/DTD/svgll .dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="background- 
color:#e5e5e5;"> 

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="white"/> 
</svg> 
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这 段 代 码 声 明文 档 类 型 为 SVG， 并 引入 了 相应 的 命名 空间 以 解析 SVG 代码 。 之 后 ， 
笔者 在 画布 上 绘制 了 一 个 圆心 坐标 (cx，cy) 为 (100，50) 、 半 径 r 为 40 的 圆 ， 并 用 
黑色 描 边 〈stroke) ， 用 白色 填充 〈f) ， 如 图 11.1 所 示 。 


11.1 SVG 示例 


你 可 以 把 这 段 代 码 保存 到 任意 以 .svg 为 后 缀 的 文件 中 ， 之 后 在 浏览 器 端 打 开 文 件 即 
可 看 到 上 述 视 图 。 当 然 ， 我 们 也 可 以 使 用 其 他 办 法 来 引用 这 个 文件 ， 代 码 如 下 : 
<!-- 图 片 方式 --> 


<img src="./index.svg"><br> 

<!-- 框架 方式 --> 

<iframe src="./index.svg"></iframe> 

<!-- 背景 方式 --> 

<div style="width: 300px;height: 1l50px;background: url(./index-. 
svg) "></div> 


除 此 之 外 ， 我 们 还 可 以 在 HTML 代码 中 直接 使 用 SVG 元 素 ， 示 例 代码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
</head> 
<body> 
<svg xmlns="http://www.w3.0rg/2000/svg" width="300px" height="150px" 
style="background-color: #e5e5e5;"> 
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" 
fill="white"></circle> 
</svg> 
</body> 
</html> 


以 上 各 示例 代码 的 运行 结果 均 如 图 11.1 所 示 。 除 了 本 节 中 用 到 的 圆 形 ，SVG 还 提供 
了 许多 基本 图 形 ， 笔 者 将 在 下 一 小 节 中 进行 讲述 。 
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11.1.2 基本 图 形 的 使 用 


SVG 提供 了 一 些 基本 图 形 供 开 发 者 使 用 ， 这 些 图 形 包 括 矩 形 <rect>、 圆 形 
<circle>、 椭 圆 <ellipse>、 线 段 <line>、 折 线 <polyline>、 多 边 形 <polygon> 和 路 径 
<path> 等 。 

除了 一 些 公 用 属性 〈 如 stroke、stroke-width、fl 等 ) 之 外 ， 每 个 图 形 还 拥有 独特 
的 属性 用 以 定义 图 形 的 外 观 。 下 面 来 看 一 个 示例 ， 示 例 包 含 了 上 述 所 有 的 图 形 ， 代 码 
如 下 : 


<svg 
xlmns="http://www.w3.0rg/2000/svg" 
width="600px" 
height="600px" 
ViewBox="0 0 1200 1200" 
style="border: lpx solid #ccc;"> 
<!-- 以 左上 角 坐 标 (x，y) 、 宽 度 width 和 高 度 height 来 定义 矩形 --> 
<rect x="50" y="50" width="300" height="300" 
stroke="#000000" fill="#fff" stroke-width="3"></rect> 
<!-- 以 圆心 坐标 (cx，cy) 和 半径 r 来 定义 圆 形 --> 
<circle cx="600" cy="200" r="150" 
stroke="#000000" fi]l="#fff" stroke-width="3"></circle> 
<!-- 以 圆心 坐标 (cx，cy) 、 水 平 半径 rx 和 垂直 半径 ry 来 定义 椭圆 --> 
<ellipse cx="1000" cy="200" rx="150" ry="100" 
stroke="#000000" fill="#fff" stroke-width="3"></ellipse> 
<!-- 以 起 点 坐标 (x1，y1) 和 终点 坐标 (x2，y2) 来 定义 线段 --> 
<line xl="50" yl="450" x2="350" y2="750" 
stroke="#000000" stroke-width="3"></line> 
<!-- 以 路 径 上 各 拐点 的 坐标 (x1，y1)…… (xn，yn) 来 定义 折线 --> 
<polyline points="600,450 750,600 600,750 450,600" 
stroke="#000000" fill="#fff" stroke-width="3"></polyline> 
Pe 以 路 径 上 各 拐点 的 坐标 (x1， y1)…… (xn， yn) 来 定义 多 边 形 ,终点 将 连接 起 点 形成 
闭合 --> 
<polygon points="1000,450 1150,600 1000,750 850,600" 
stroke="#000000" fill="#fff" stroke-width="3"></polygon> 
<!-- 以 各 种 线段 和 曲线 的 变形 方式 来 定义 路 径 ， 这 里 不 再 拓展 --> 
<path d="M100, 1050A100, 150, 30, 1, 1, 200, 1150M100, 1050A70, 150, 30, 0, 1, 200, 1150" 
stroke="#000000" fill="#fff" stroke-width="3"></path> 


</svg> 


示例 代码 的 运行 结果 如 图 11.2 所 示 。 
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11.2 SVG 基本 图 形 


除 此 之 外 ， 本 章 所 演示 的 项 目 还 将 用 到 SVG 中 的 渐变 。 


11.1.3 SVG 中 的 渐变 


SVG 中 的 渐变 主要 分 为 线性 渐变 (Linear Gradient) 和 径 向 渐变 (Radial Gradient) 两 种 。 
我 们 先 来 看 一 个 有 关 线 性 渐变 的 示例 ， 代 码 如 下 : 


<body> 
<svg 
xlmns="http://www.w3.0rg/2000/svg" 
width="600px" 
height="300px" 
ViewBox="0 0 600 300" 
style="border: lpx solid #ccc;"> 
<!-- 渐变 需要 在 defs (definitions) 元 素 中 定义 --> 
<defs> 
<!-- 渐变 需要 提供 id 以 便 图 形 引用 --> 
<!-- 线性 渐变 需要 确定 渐变 起 始 位 置 (x1， Y1) 和 渐变 终止 位 置 (x2，y2) --> 
<LinearGradient id="linear" xl="0%" yl="0%" x2="]100%" y2="0%"> 
<!-- 定义 渐变 方向 上 各 变化 点 ( 色 站 ) 的 属性 --> 
<!-- offset 代 表 位 置 ， stop-color 代 表 颜 色 ， stop-opacity 代 表 透 明度 --> 
<stop offset="0%" stop-color="#000000" stop-opacity="1"></stop> 
<stop offset="100%" stop-color="#ffffff" stop-opacity="1"></stop> 
</LinearGradient> 
</defs> 
<!-- 在 fil1 中 引用 渐变 --> 
<rect x="25" y="50" width="150"” height="200" fil1="url (#linear)"></rect> 
<circle cx="300" cy="150" r="100" fill="url (#linear)"></circle> 
<ellipse cx="500" cy="150" rx="75" ry="100" fi]l="url (#linear)"></ellipse> 
</svg> 
</body> 
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线性 渐变 的 定义 和 使 用 其 实 并 不 复杂 。 

首先 ， 我 们 需要 确定 渐变 的 起 始 位 置 和 终止 位 置 ， 从 起 始 位 置 到 终止 位 置 的 连 线 即 
是 渐变 的 方向 。 在 示例 中 ， 笔 者 设置 起 始 位 置 为 《0%，0%) ,终止 位 置 为 (100%，0%)， 
这 是 一 个 水 平方 向 的 线性 渐变 。 

之 后 ， 笔 者 在 渐变 的 起 点 和 终点 处 各 设置 了 一 个 色 站 ， 两 者 的 不 透明 度 均 为 1， 颜 
色 分 别 为 黑色 和 白色 。 

最 后 ， 当 我 们 需要 为 图 形 填 充 渐变 时 ,只 需要 将 图 形 的 fl 属性 与 渐变 的 这 关联 即 可 。 
示例 代码 的 运行 结果 如 图 11.3 所 示 。 


图 11.3 SVG 中 的 线性 渐变 


径 向 渐变 的 定义 、 使 用 与 线性 渐变 类 似 ， 关 键 是 渐变 形状 和 方向 的 定义 有 所 不 同 。 
下 面 来 看 一 个 示例 ， 代 码 如 下 : 


<body> 
<svg 
xlmns="http://www.w3.0rg/2000/svg" 
width="600px" 
height="300px" 
ViewBox="0 0 600 300" 
style="border: lpx solid #ccc;"> 
<!-- 渐变 需要 在 defs (definitions) 元 素 中 定义 --> 
<defs> 
<!-- 渐变 需要 提供 id 以 便 图 形 引 用 --> 
<!-- 径 向 渐变 需要 确定 渐变 中 心 位 置 (cx，cy) 、 渐 变 半 径 和 渐变 焦点 位 置 (fx，fy) --> 
<!-- 渐变 中 心 是 渐变 主体 相对 于 图 形 的 位 置 --> 
<!-- 渐变 焦点 是 渐变 开始 的 位 置 --> 
<RadialGradient id="radial™" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> 
<stop offset="0%" stop-color="#000000" stop-opacity="1"></stop> 
<stop offset="100%" stop-color="#ffffff" stop-opacity="1"></stop> 
</RadialGradient> 
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</defs> 
<!-- 在 fl1 中 引用 渐变 --> 
<rect x="25" y="50" width="150" height="200" fill="url (#radial)" stroke= 


"#ccc"></rect> 

<circle cx="300" cy="150" r="100" fill="url (#radial)" stroke="#ccc"></ 
circle> 

<ellipse cx="500" cy="150" rx="75" ry="100" fill="url (#radial)" stroke= 
"#ccc"></ellipse> 
</svg> 
</body> 


示例 代码 的 运行 结果 如 图 11.4 所 示 。 


图 11.4 SVG 中 的 径 向 渐变 


关于 SVG 的 知识 点 有 很 多 ， 笔 者 只 介绍 了 项 目 中 用 到 的 一 些 内 容 。 不 过 ， 国 内 也 有 
许多 SVG 相关 的 优秀 教程 ， 感 兴趣 的 同学 可 以 自行 学 习 。 

在 学 习 过 本 节 内 容 之 后 ， 同 学 们 是 否 能 想到 在 SVG 图 形 的 绘制 中 ，Vue 的 哪些 机 制 
能 够 大 显 身手 呢 ? 


11.2 项 目 介绍 


本 章 中 的 项 目 也 是 由 Vue CLI 快速 构建 而 成 , 在 项 目 结构 方面 并 没有 什么 特殊 之 处 。 
我 们 先 来 看 一 下 项 目的 各 部 分 页 面 。 


11.2.1 页 面 介绍 
项 目的 首 屏 视 图 如 图 11.5 所 示 。 
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图 11.5 SVG Board 


在 顶部 区 域 中 ， 笔 者 放置 了 网 站 logo 图 片 。 在 左 侧 工具 栏 中 ， 用 户 可 以 选择 SVG 
的 基本 图 形 、 文 本 和 渐变 添加 到 画板 中 。 在 右 侧 菜 单 栏 中 ,用户 可 以 选择 调 出 画板 设置 、 
图 形 列表 、 图 形 设置 、 渐 变 列表 和 渐变 设置 等 面板 来 配置 相关 对 象 的 参数 。 中 间 区 域 即 
是 我 们 的 SVG 画板 。 页 面 的 布局 结构 如 图 11.6 所 示 。 


顶部 Header 


工具 栏 Toolbox 


画板 Board 


图 11.6 页 面 布局 的 代码 结构 
当 用 户 添加 图 形 到 画板 上 时 ， 页 面 视 图 如 图 11.7 所 示 。 
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SVG Board 


图 11.7 添加 图 形 后 


当 用 户 修改 图 形 的 参数 之 后 ， 页 面 的 视图 如 图 11.8 所 示 。 


SVG Board 


图 11.8 修改 图 形 参数 后 


当 用 户 选择 新 建 渐变 色 时 ， 页 面 的 视图 如 图 11.9 所 示 。 
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SVG Board 


11.9 新 建 渐变 色 


当 用 户 将 渐变 色 赋 予 图 形 之 后 ， 页 面 的 视图 如 图 11.10 所 示 。 
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11.10 ”赋予 图 形 渐变 色 


笔者 使 用 该 画板 绘制 了 一 幅 简 笔画 ， 如 图 11.11 所 示 。 
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图 11.11 画板 作品 : Slient Night 


由 于 笔者 并 未 花费 太 多 时 间 进 行 设计 ， 所 以 简 笔 画 的 构图 较为 粗糙 ， 不 过 大 致 能 够 
体现 画图 板 的 作用 就 足够 了 ， 用 户 完全 可 以 使 用 该 画板 设计 出 更 好 看 和 更 有 趣 的 作品 。 


11.2.2 ”代码 简 析 
下 面 的 示例 演示 了 笔者 是 如 何 生成 SVG 画板 内 容 的， 代码 如 下 


<svg 
class="stage" 
xlmns="http://www.w3.0rg/2000/svg" 
:width="boardWidth" 
:height="boardHeight" 
:ViewBox="ViewBox" 
:style="{ backgroundColor: boardBgColor }"> 
<defs 
V-for="gradient in gradientList" 
:key="'"'g' + gradient.id"> 
<!-- 以 线性 渐变 为 例 --> 
<linearGradient 
Vv-if="gradient.type === "linear'™" 
:id="gradient .name" 
:Xl—"gradieontexl + "®"™ 
:yl="gradient .yl 
:xXx2="gradient .x2 
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:y2="gradient.y2 + '%'"> 


(stop, index) in gradient.stops" 
ndex" 
:offset="stop.offset + ‘%"™" 
:stop-color="stop.color™ 
:stop-opacity="stop.opacity"></stop> 
</linearGradient> 
<!-- 此 处 省 略 部 分 代码 --> 
</defs> 
<g 
Vv-for="shape in shapeList" 
:key="'s' + shape.id"> 
<!-- 以 矩形 为 例 --> 
wk 
Vv-show="shape.isHidden < 0" 
Class="actor" 
V-if="shape.type === 


rect'™ 


:width="shape.width" 
:height="shape.height" 
:fill="shape.fill" 
:stroke="shape.stroke" 
:stroke-width="shape.strokeWidth" 
@click="handleShapeClick (shape)"></rect> 
<!-- 以 圆 形 为 例 --> 
<circle 
shape.isHidden < 0" 
ctor" 
Vv-else-if="shape.type === 'circle'" 
="shape.cx" 
shape.cy" 
"shape.r" 
:fill="shape.fill" 
:stroke="shape.stroke" 
:stroke-width="shape.strokeWidth" 
@click="handleSshapeClick (shape)"></circle> 
<!-- 此 处 省 略 部 分 代码 --> 
</g> 
</svg> 


笔者 将 所 有 的 图 形 和 渐变 分 别 保 存在 数组 shapeList 和 gradientList 中 ， 之 后 在 SVG 
画板 中 组 合 使 用 v-for 和 v- 寺 指令 以 生成 相应 的 元 素 ， 数 组 元 素 shape 对 象 和 gradient 对 
象 的 type 属性 十 分 重要 ， 它 标识 了 待 生 成 元 素 的 类 型 。 

当 用 户 点 击 左 侧 工具 栏 选项 以 添加 图 形 或 者 渐变 时 ，createShape 和 createGradient 方 
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法 将 被 调用 ， 笔 者 以 createShape 为 例 进行 讲解 ， 方 法 的 代码 如 下 : 
CreateShape (type) { 
// 取 数组 中 最 大 的 id， 将 其 加 1 以 生成 新 的 id 
let id = this.shapeList.1length 
? Math.max(... (this.shapeList.map(shape => shape.id))) + 1 


如 是 
// 共有 属性 
let prototype = { 
id, 
name: this.toHex(id) + '-' + type, 
type, 


isHidden: -1, 
stroke: '#4e9bd4', 
fillType: 'pure', 
LE 
strokeWidth: 3 


} 

// 独 有 属性 

let partial = { // 各 图 形 的 属性 和 预 置 参数 
Facts A XK: S0, Y: 35 Widtlis 140> eligit: 90 }, 
cirelas t crs 360, ys 0% Es 的 1 
sllipaes 1 cr: 600 cys Bor Tr; Wi WE NM Ni 
Lines 4 Ls AO0 Yl TI07 R27 0Dy V2 290 3y 
polyline: { points: '360,180 300,240 430,240 360,300' }, 
polygon: { points: '600,180 540,240 605,240 600,300 670,240' }, 
path: { d: 'M60,370C160,370,60,430,180,430' }, 
text: { x: 300, y: 420，fontSize: 72，text: ' 文 本 ' } 

} [type] 

// 合并 图 形 属性 

let shape = Object.assign (prototype, partial) 

// 将 图 形 对 象 加 入 数组 

this.shapeList .push (shape) 

// 将 该 对 象 设 为 正在 编辑 的 图 形 

this.shapeItem = shape 

// 控制 页 面 显示 图 形 面 板 

this.activeBar = "shape' 

// 控制 页 面 显示 图 形 设置 面板 

this.isShapeList = false 


createShape 方法 生成 的 即 是 shapeList 数组 中 的 对 象 。 

在 该 方法 中 ， 笔 者 先 获取 shapeList 数组 中 最 大 的 id 编号 ， 将 其 加 1 作为 新 对 象 的 
jd。 之后， 笔者 声明 了 prototype 对 象 和 partial 对 象 ， 用 于 保存 各 个 图 形 共有 的 和 特有 的 
属性 。 在 对 象 属性 合并 之 后 ， 笔 者 将 其 加 入 数组 ，Vue 将 根据 对 象 属性 来 自动 绘制 图 形 。 

在 代码 中 ， 笔 者 还 对 变量 shapeItem、activeBar 和 isShapeList 进行 了 修改 。 那 么 ， 这 
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些 变量 具有 什么 作用 呢 ? 笔者 将 部 分 DOM 结构 抽 离 出 来 ， 代 码 如 下 : 
<!-- 设置 面板 --> 


<div class="setting-panel" v-if="activeBar !== "none'"> 
<!-- 画板 设置 --> 
<div v-if="activeBar === 'board'"> 
<!-- 此 处 省 略 画板 设置 的 相关 代码 --> 
</div> 


<!-- 图 形 设置 - 
<div v-else-if="activeBar === 'shape'"> 


<!-- 图 形 列表 面板 --> 


<div v-if="isShapeList"> 
<h4 class="setting-title"> 图 形 列表 </h4> 
<ul class="shape-list" v-if="shapeList.length"> 
<1i 


Vv-for="shape in shapeList" 
:key="shape.id" 
:title="shape.name" 
class="shape-list-item" 
Qclick="toggleShapeItem (shape) "> 
<!-- 此 处 省 略 列表 项 的 泻 染 代码 --> 
</1i> 
</ul> 
</div> 
<!-- 图 形 设 置 面板 --> 
<div v-else> 
<h4 class="setting-title"> 
参数 设置 
<span 
class="fa fa-close setting-closer" 
eclick="backTo ('shapeList')"></span> 


</h4> 

<!-- 矩形 面板 --> 

<div v-if="shapeItem.type === 'rect'"> 
<!-- 此 处 省 略 矩 形 设置 面板 的 相关 代码 --> 

</div> 


<!-- 圆 形 面板 --> 
<div v-else-if="shapeItem.type = "elrele’ > 


<!-- 此 处 省 略 圆 形 设置 面板 的 相关 代码 --> 


</div> 
<!-- 此 处 省 略 各 种 图 形 设置 面板 的 相关 代码 ， --> 
</div> 
</div> 
<!-- 渐变 设置 --> 
<div v-else-if="activeBar === "gradient'"> 


<!-- 渐变 列表 面板 --> 


<div v-if="isGradientList"> 


4 
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<h4 class="setting-title"> 渐 变 列表 </h4> 
<!-- 渐变 列表 --> 
<ul class="shape-list" v-if="gradientList.length"> 
<!-- 此 处 省 略 列表 项 泻 染 的 相关 代码 ， --> 

</ul> 

</div> 

<!-- 渐变 设置 面板 -> 

<div v-else> 
<!-- 此 处 省 略 渐变 设置 面板 的 相关 代码 --> 

</div> 

</div> 
</div> 


在 这 段 代码 中 ， 条 件 泻 染 的 嵌 套 结构 一 共有 三 层 。 


在 第 一 层 中 有 画板 、 图 形 和 渐变 三 个 面板 ， 由 变量 activeBar 来 控制 显示 哪 一 个 面板 。 


在 第 二 层 中 ， 图 形 面板 又 分 为 图 形 列 表 和 图 形 设置 两 个 面板 ， 由 


变量 isShapeList 


来 控制 显示 哪 一 个 面板 ， 渐 变 面板 又 分 为 渐变 列表 和 渐变 设置 两 个 面板 ， 由 变量 


isGradientList 来 控制 显示 哪 一 个 面板 。 


当 点 击 图 形 或 渐变 列表 中 的 元 素 时 ， 面 板 将 进入 第 三 层 结构 。 以 图 形 面板 为 例 ， 应 
用 将 根据 图 形 的 类 型 shape.type) 来 显示 相应 的 设置 面板 ， 以 供用 户 来 配置 图 形 的 各 项 


参数 。 笔 者 将 上 述 过 程 绘制 成 一 张 示意 图 ， 如 图 11.12 所 示 。 


同 入 后 


人 © ® = 


11.12 面板 层次 的 切换 顺序 


当 点 击 图 形 列表 中 的 元 素 时 ， 面 板 将 进入 图 形 的 参数 设置 界面 ， 可 是 我 们 如 何 来 记 


录 当 前 配置 的 是 哪 一 个 元 素 呢 ? 
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不 知 同学 们 是 否 留意 到 ， 在 上 述 抽 离 出 的 DOM 结构 代码 中 ， 笔 者 在 演 染 图 形 列 表 
时 为 列表 元 素 添加 了 一 个 点 击 监 听 事 件 。 当 列表 项 被 点 击 时 ，toggleShapeItem 方法 将 被 
调用 ， 方 法 的 代码 如 下 : 


toggleShapeItem (shape) { 
this.isShapeList = false 
this.shapeItem = shape 


} 


因为 此 时 面板 所 处 的 位 置 为 图 形 列表 ， 所 以 只 需 修改 isShapeList 的 值 即 可 将 面板 切 
换 到 图 形 设置 ， 这 行 代码 用 于 切换 面板 的 视图 显示 。 之 后 ， 笔 者 将 选中 的 图 形 对 象 赋值 
给 shapeItem 对 象 。shapeItem 中 的 数据 将 和 视图 进行 双向 绑 定 ， 以 矩形 为 例 ， 代 码 如 下 : 
<!-- 和 拢 形 面板 --> 


<div v-if="shapeItem.type === 'rect'"> 
<div class="setting-row"> 
<label class="setting-label" for="name"> 名 称 </label> 
<input id="name" class="ipt-setting setting-value" type="text" v-model= 
"shapeItem.name"> 
</div> 
<div class="setting-row"> 
<label class="setting-label" for="x"> 坐 标 x</label> 
<input id="x" class="ipt-setting setting-value" min="0" type="number" 
v-model="shapeItem.x"> 
</div> 
<div class="setting-row"> 
<label class="setting-label" for="y"> 坐 标 Y</label> 
<input id="y" class="ipt-setting setting-value" min="0" type="number" 
v-model="shapeItem.y"> 
</div> 
<div class="setting-row"> 
<label class="setting-label" for="wiqdth"> 宽 度 </label> 
<input id="width" class="ipt-setting setting-value" min="0" type="number" 
Vv-model="shapeItem.width"> 
</div> 
<div class="setting-row"> 
<label class="setting-label"” for="height"> 高 度 </label> 
<input id="height" class="ipt-setting setting-value" min="0" type="number" 
v-model="shapeItem.height"> 
</div> 
<div class="setting-row"> 
<label class="setting-label" for="strokeWidth"> 描 边 宽度 </label> 
<input id="strokeWidth" class="ipt-setting setting-value" min="0" 
type="number" v-model="shapeItem.strokeWidth"> 
</div> 
<div class="setting-row"> 
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<label class="setting-label" for="stroke"> 描 边 颜色 </1label> 
<input id="stroke" class="ipt-setting setting-value" type="color™" 
v-model="shapeItem.stroke"> 
</div> 
<div class="setting-row"> 
<label class="setting-label"> 填 充 方 式 </label> 
<input id="pure" name="fill" type="radio" value="pure" v-model="shapeItem. 
fillType" @click="initialFillColor('pure')"><!—— 
--><label for="pure">&nbsp; 纯 色 </1label> 
&nbsp; gnbsp; 
<input id="mixed" name="fill" type="radio" value="mixed" :disabled= 
"lgradientList.length" v-model="shapeItem.fillType" @click="initialFi 
llColor('mixed')"><!-— 
--><label for="mixed">&nbsp; 渐 变色 </label> 
</div> 
<div class="setting-row" v-if="shapeItem.fillType === 'pure'"> 
<label class="setting-label"” for="fil1"> 填 充 颜 色 </1abel> 
<input id="fill" class="ipt-setting setting-value" type="color" v-model= 
"shapeItem.fil1l"> 
</div> 
<div class="setting-row" v-else-if="shapeItem.fillType === 'mixed'"> 
<label class="setting-label" for="mixedSelect"> 填 充 颜 色 </label> 
<select id="mixedSelect" name="mixed" v-model="shapeItem.fill"> 
<option v-for="option in gradientList" :key="option.id" :value="'url 
(#' + option.name + ')'">{{ option.name }}</option> 
</select> 
</div> 
<div class="setting-row"> 
<label class="setting-label"> 可 见 性 </1label> 
<input id="show" name="radio" type="radio" value="-1" v-model="shapeItem. 
isHidden"><!-—— 
--><label for="show">&nbsp; 显 示 </label> 
&nbsp; Enbsp; 
<input id="higde" name="radio" type="radio" value="]l" v-model="shapeItem. 
isHidden"><!-—— 
--><label for="hide">&gnbsp; 隐 藏 </label> 
</div> 
</div> 


基于 JS 对 象 引用 的 原理 ， 当 用 户 修改 shapeItem 对 象 中 的 数据 时 ，shapeList 数组 中 
相应 的 数据 也 将 被 修改 ，SVG 画板 上 的 图 形 属性 也 将 随 之 改变 。 

到 这 里 ， 本 章 内 容 基 本 结束 。 项 目的 难点 主要 在 于 对 SVG 的 理解 程度 和 对 Vue 各 项 
语法 综合 运用 的 熟练 度 。 希望 同学 们 不 要 抱 着 代码 软 磨 硬 泡 , 而 是 要 学 会 在 观察 中 总 结 ， 
在 总 结 中 实践 和 提升 。 
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每 一 个 项 目 都 不 是 一 趴 而 就 的 ， 开 始 的 计划 总 是 随 着 局 势 〈 团 队 领导 者 的 想法 、 市 
场 变动 、 客 户 需 求 等 ) 的 变化 不 断 地 被 修改 ， 项 目 总 是 在 一 次 次 试 错 的 过 程 中 不 断 地 成 
长 和 成 熟 。 在 反复 的 优化 和 重 构 后 ， 项 目 才 有 了 最 终 的 模样 ， 这 是 一 个 螺旋 上 升 的 过 程 。 

技术 也 是 如 此 , 甚至 说 人 的 一 生 也 是 如 此 。 看 过 很 多 ,懂得 很 多 , 才 有 了 你 现在 的 模样 。 
别人 的 人 生 终 归 是 别人 的 , 你 不 亲身 经 历 一 番 , 将 永远 不 会 有 那样 的 感受 。 代码 也 是 如 此 ， 
你 不 亲自 去 写 一 下 ， 就 永远 不 是 你 的 。 

最 后 ， 祝 愿 同 学 们 在 职业 生涯 中 越 走 越 顺 。 


附 


附录 A Git 入门 


1. 傻 瓜 ? 无 用 之 人 ? 


Git 的 中 文 翻译 是 “傻瓜 、 无 用 的 人 ”， 为 什么 这 样 一 款 流行 的 工具 会 起 这 样 一 个 名 
字 呢 ? 

坊间 流传 Git 的 创始 人 Linus (Linux 之 父 ) 曾 说 过 一 句 话 : “我 是 个 自负 的 混蛋 ， 
所 有 我 的 项 目 都 以 我 自己 的 名 字 命名 ， 先 有 Linux， 现 在 是 Git。” 

Linus 也 曾 在 公共 场合 表示 过 对 Git 的 看 法 : “Git，the stupid content tracker”。 
Git, 傻瓜 内 容 追 踪 器 。 如 傻瓜 相机 一 样 , 这 里 的 “傻瓜 ” 指 的 是 让 复杂 的 操作 变 得 更 简单 。 

也 有 人 认为 Git 是 “Global information tracker” 的 缩写 。 如 果 将 项 目 整 体 认 为 是 “全 
局 ”， 项目 文件 内 容 认 为 是 “信息 ”， 文 件 内 容 的 增删 改 查 认为 是 “跟踪 ”，Git 的 本 质 
的 确 是 “全 局 信息 跟踪 ”。 

回 到 定义 上 来 ，Git 是 一 个 开源 的 分 布 式 版 本 控制 系统 ， 可 有 效 地 帮助 团队 进行 多 人 
协作 开发 。 

在 Git 项 目 开 始 时 ， 项 目 保 有 一 个 远程 的 中 央 仓库 ， 团 队 成 员 在 本 地 克隆 中 央 仓 库 
的 副本 。 之 后 ， 团 队 成 员 开 始 各 自 的 工作 ， 此 时 每 位 成 员 的 项 目 基 线 都 领先 于 中 央 仓 库 
却 又 各 自 不 同 。 如 果 将 每 个 成 员 的 工作 成 果 合 并 在 一 起 ， 即 得 到 项 目的 最 新 状态 ， 也 可 
以 说 项 目的 最 新 状态 是 分 散在 每 个 成 员 的 本 地 仓库 中 的 ， 这 即 是 分 布 式 的 概念 ， 如 图 A.1 


所 示 。 
| 中 央 仓库 


0 了 人 本 地 仓库 


号 济 汐 


A.1 分 布 式 
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在 某 种 情况 下 ,项 目 需 要 回 到 以 前 的 某 个 状态 (比如 遇 到 程序 出 错 、 需 求 变动 等 情况 )， 


又 或 者 团队 带头 人 需要 查看 项 目 各 部 分 的 责任 人 ， 这 也 正 是 版 本 控制 系统 所 要 处 理 的 问 
题 。Git 在 用 户 提交 代码 时 将 建立 版 本 记录 , 允许 用 户 查 看 每 次 提交 的 内 容 和 相关 信息 (如 
提交 人 、 提 交 时 间 等 ) ， 也 允许 用 户 将 项 目 回 退 到 之 前 的 某 个 版 本 。 


Git 的 用 法 并 不 复杂 ， 由 于 工作 流程 较为 琐碎 ， 在 此 不 再 演示 ， 笔 者 在 后 面 推荐 了 一 


些 相关 资料 ， 感 兴趣 的 同学 可 以 去 看 一 下 。 


2. 常用 命令 


下 面 笔 者 列举 了 一 些 常 用 的 Git 命令 : 
克隆 远程 仓库 


git clone 

初始 化 一 个 仓库 

git init 

将 文件 修改 添加 到 缓冲 区 

git add 

移动 或 重 命名 一 个 文件 、 文 件 夹 或 快捷 方式 
git mv 

可 退 项 目 版 本 

git reset 

将 文件 修改 从 缓冲 区 中 移 除 

git rm 

git status 

显示 项 目 日 志 

git log 

显示 项 目 分 支 

git branch 

切换 分 支 或 重 置 文件 

git checkout 

提交 项 目 修改 到 仓库 

git commit 

对 比 版 本 之 间 、 版 本 和 当前 工作 状态 之 间 的 差异 
git diff 

合并 文件 

git merge 

将 新 的 提交 放 在 另 一 个 分 支 的 上 面 
git rebase 

# 创建 、 显 示 、 校 验 标签 对 象 

git tag 

拉 取 其 他 仓库 的 对 象 和 索引 

git fetch 
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# 拉 取 其 他 仓库 内 容 并 和 本 地 分 支 合并 
git pull 

# 更 新 远程 仓库 

git push 


3. 相关 推荐 


Git 下 载 地 址 : https: //git-scem.com/ 

Git 英文 教程 (基本 原理 ) : https: //jwiegley.github.io/git-from-the-bottom-up/ 
Git 中 文教 程 (命令 用 法 ) : https: //github.com/lonelydawn/git-recipes/ 

Git GUI 推荐 : Source Tree: https: //www.sourcetreeapp.com/ 

GitHub 官方 : GUI: https: //desktop.github.com/ 

Git 项 目 托管 平台 推荐 : 

GitHub: https: //github.com/ 

BitBucket: https: //bitbucket.org/ 


附录 B NPM 入 门 


1. 简介 


NPM 是 什么 ?从 字面 意思 上 来 看 ，NPM (Node Package Manager) 是 一 个 NodeJS 
包 管 理 和 分 发 工具 。 但 从 其 诞生 至 今 ， 它 以 其 优秀 的 依赖 管理 机 制 和 庞大 的 用 户 群体 ， 
已 经 发 展 成 为 整个 JS 领域 的 依赖 管理 工具 。 同 时 ， 它 也 是 世界 上 最 大 的 代码 包 注册 库 ， 
这 个 仓库 收纳 了 超过 60 万 个 代码 包 ， 每 周 有 超 过 30 亿 的 下 载 次 数 。 


2. 基础 用 法 


NPM 最 常见 的 用 法 就 是 用 于 安装 和 更 新 依赖 。 要 使 用 NPM， 首先 要 安装 Node 工具 ， 
Windows 用 户 可 到 官网 下 载 安装 工具 。 当 安装 程序 完成 后 ， 在 命令 行 输入 以 下 命令 : 


npm --version 


如 果 出 现 版 本 号 信息 , 则 表示 安装 成 功 ,之 后 , 新 建 index 目录 , 在 目录 下 打开 命令 行 ， 
输入 以 下 命令 : 

npm init 

然后 一 路 按 回 车 ， 直 到 出 现 “Is this ok ? (yes) ”为 止 。 此 时 ，index 目录 下 将 出 
现 package.json 文 件 , 这 即 是 NPM 的 配置 文件 。 下面 , 我 们 以 jQuery 为 例 来 安装 一 下 依赖 。 
在 命令 行 输入 : 

npm install jquery --save 

此 时 ，index 下 将 出 现 node_modules 目录 ， 这 里 面 存放 的 即 是 下 载 好 的 依赖 。 接 下 
来 在 index 目录 下 创建 index.html 文件 ， 文 件 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
</head> 
<body> 
<hl id="title">Hello World</h1l> 
<script type="tezxt/javascript" src="./node modules/jquery/dist/jquery.min. 
Tcript> 
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<script type="text/javascript"> 
$('#title') .css({ // 使 用 jQuery 为 元 素 设 置 样式 
color: "#999°", 
fontsize: '36px', 
fontstyle: 'italic' 
了 
</script> 
</body> 
</html> 


之 后 ， 在 浏览 器 中 打开 index.html， 页 面 如 图 B.1 所 示 。 


Hello World 


图 B.1 使 用 jQuery 为 元 素 设置 样式 


这 表示 jQuery 被 成 功 引用 了 。 


3. 淘宝 镜像 


由 于 NPM 的 仓库 在 国外 ， 许 多 依赖 的 拉 取 速 度 十 分 缓慢 ， 所 以 通常 我 们 也 会 使 用 
淘宝 镜像 源 的 cnpm 来 下 载 依赖 。cnpm 的 安装 命令 如 下 : 


npm install -g cnpm --registry=https://registry.npm.taobao.org 


在 安装 完成 后 ， 输 入 : 


cnpm --version 


如 果 出 现 cnpm 的 相关 信息 ， 即 表示 安装 成 功 。 之 后 ， 我 们 就 可 以 使 用 cnpm 来 安装 
依赖 了 ， 以 jQuery 为 例 ， 命 令 如 下 : 


cnpm install jquery --save 


4. 常用 命令 
下 面 是 NPM 一 些 常用 的 命令 ， 如 表 B.1 所 示 。 
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表 B.1 NPM 常用 命令 
命令 ([] 中 的 表示 可 选 ) 说 有 明 
初始 化 目录 ， 生 成 package.json，-y 和 --yes 参数 表示 所 有 的 选项 
均 选择 yes 
npm install 安装 package.json 中 的 所 有 依赖 
npm install --production 安装 package.json 中 dependencies 下 的 依赖 
npm install <package> 安装 指定 依赖 
npm install <package> [-g] 全 局 安装 指定 依赖 
npm install <package> [--save-dev] | 安装 指定 依赖 ， 并 将 其 记录 在 devDependencies 中 
安装 指定 依赖 ， 依 赖 不 需要 记录 到 packagejson 中 


5 查看 依赖 信息 ， 包 括 历史 版 本 ; 可 指定 field 来 查看 某 个 键 值 ， 可 
npm view <package> [field] [--json] 添加 -json 参数 以 json 格式 显示 结果 


除了 上 述 命令 之 外 , NPM 还 有 一 些 可 用 的 命令 , 感 兴趣 的 同学 可 以 去 翻阅 官方 文档 。 


npm init [-y|--yes] 


附录 C Webpack 入 门 


1. 简介 


Webpack 是 一 个 前 端 资源 打包 工具 ， 正 如 其 字面 意思 ， 它 可 以 把 多 种 Web 静态 资源 


整合 在 一 起 ， 在 减少 页 面 请 求 的 同时 也 方便 了 开发 者 使 用 JS 和 CSS 的 变 体 语言 及 模板 
进行 开发 。 图 C.1 为 Webpack 官方 提供 的 示意 图 。 
"> 
js 
webpack 
模块 打包 器 静态 资源 
C.1 Webpack 

2. 基本 示例 


在 使 用 Webpack 之 前 ， 我 们 需要 先 将 其 下 载 到 本 地 ， 命 令 如 下 : 
# 需要 具备 node .js 环境 

cnpm install webpack webpack-cli -g 

之 后 ， 创 建 一 个 目录 test， 并 在 test 下 创建 如 下 几 个 文件 。 
src/index.]s 


export default function index () { 
document .write('<hl>index</h1>') 
} 


src/main.]s 


import index from './index' 
index () 
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index.html 


<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
</head> 
<body> 
<script type="text/javascript" src="dist/bundle.js"></script> 
</body> 
</html> 


webpack.config.js 


const path = require('path') 
module.exports = { 
entry: './src/main.js'，// 入 口 文件 
output: { 
path: path.resolve( dirname,，'dist')，// 输出 路 径 
filename: 'bundle.js' // 输出 文件 名 称 
} 
: 


接 下 来 在 test 目录 下 启动 命令 行 工具 并 输入 命令 : 

webpack 

等 打包 完成 之 后 ，test 下 会 生成 一 个 新 的 目录 dist， 这 是 资源 打包 后 的 输出 目录 ， 里 
面 的 bundlejs 即 是 打包 好 的 文件 。 

之 后 ， 在 浏览 器 端 打开 index.html， 将 会 看 到 页 面 显 示 文 字 “index”。 


3. 配置 loader 


Webpack 本 身 只 能 处 理 JS 模块 ， 如 果 想 要 打包 更 多 的 文件 类 型 ， 如 CSS， 还 要 为 其 
配置 loader 插件 。 首 先 ， 我 们 需要 在 test 目录 下 安装 css-loader 和 style-loader 两 个 依赖 ， 
命令 如 下 : 


cnpm install css-loader style-loader 


然后 在 目录 下 添加 src/index.css 文件 ， 代 码 如 下 : 


body { 
background-color: #eee; 
. 


接着 在 src/mainjs 中 引入 src/index.css 文件 ， 代 码 如 下 : 
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import index from './index' 
import './index.css' 
index () 


之 后 在 webpack.configjs 文件 中 配置 loader， 代 码 如 下 : 


const path = require('path') 
module.exports = { 
entry: './src/main.js', 
output: { 
path: path.resolve( dirname, 'dist'), 
filename: 'bundle.js' 


test: / 八 .css$/， // 正则 表达 式 ， 匹 配 文件 类 型 
loader: 'style-loader!css-loader' // 声明 使 用 什么 loader 进 行 处 理 


] 
} 
} 


最 后 ， 再 次 启动 Webpack 编译 和 打包 资源 。 此 时 ， 刷 新 页 面 即 可 看 到 当前 的 视图 ， 
如 图 C.2 所 示 。 


index 


C.2 打包 css 文件 


从 图 C.2 中 可 以 看 到 ，body 的 背景 颜色 发 生 了 变化 。 


4. 配置 plugin 


plugin 在 资源 编译 和 打包 之 外 提供 了 更 丰富 的 功能 ，Webpack 自 带 一 些 plugin， 而 另 
一 些 则 需要 开发 者 手动 安装 。 

Webpack 内 置 的 BannerPlugin 插件 可 以 在 打包 好 的 文件 开头 插入 一 些 注 释 信 息 ， 而 
html-webpack-plugin 插件 则 可 以 将 打包 好 的 资源 自动 注入 到 HTML 模板 中 。 下 面 ， 我 们 
将 在 示例 中 引用 这 两 个 插件 。 
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首先 ， 我 们 需要 在 test 目录 下 安装 Webpack 和 html-webpack-plugin 依赖 ， 命 令 如 下 : 


cnpm install webpack html-webpack-plugin --save-dev 


然后 修改 webpack.configjs， 代 码 如 下 : 


const path = require('path') 
const webpack = require('webpack') 
const HtmlWebpackPlugin = require('html-webpack-plugin') 
module.exports = { 
entry: './src/main.js', 
output: { 
path: path.resolve( dirname, "dist'), 
filename: '[hash] .bundle.js' // 加 入 hash 值 ， 防 止 缓存 
}, 
module: { 
rules: [ 
{ 
test: / 八 .css$/， // 正则 表达 式 ， 匹 配 文件 类 型 
loader: 'style-loader!css-loader'  // 声明 使 用 什么 loader 进 行 处 理 
} 
] 
}, 
plugins: [ 
new webpack.BannerPlugin('Created by lonelydawn.'), 
new HtmlWebpackPlugin({ 
filename: './index.html', 
template: './index.html', 
inject: 'body', 
hash: true 
}) 
] 
} 


最 后 ， 再 次 启动 Webpack 编译 和 打包 资源 。 此 时 ， 打 开 bundlejs， 我 们 可 以 看 到 


文件 开头 处 出 现 注 释 信 息 “Created by lonelydawn”; 同时 ，dist 文件 夹 下 出 现 了 index. 
html， 并 且 打包 好 的 资源 被 注入 到 新 文件 中 。 


5. 实战 示例 


下 面 是 一 个 小 型 项 目的 Webpack 配置 文件 ， 同 学 们 可 以 仔细 体会 一 下 ， 文 件 的 代码 


如 下 : 


const path = require('path') 
const webpack = require('webpack') 
const HtmlWebpackPlugin = require('html-webpack-plugin') 
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Const ExtractTextPlugin = require('extract-text-webpack-plugin') 


module.exports = { 
devtool: ‘eval-source-map', 
entry: path.join( dirname, 'src/main.js'), 
output: { 
path: path.join( dirname, "dist'), 
filename: 'bundle.js' 
}, 
devSserver: { 
// 静态 资源 
ContentBase: './static', 
historyApiFallback: true, 
inline: true, 
compress: true, 
port: 8080, 
hot: true 
}, 
module: { 
Fulese: [ 
{ 
tests NDS/ 
use: 'html-loader' 
}, 


test: /\N.css$/, 
use: ExtractTextPlugin.extract({ 
fallback: 'style-loader', 
use: "css-loader" 
}) 
3 


toest: /Nias/s 
exclude: /node modules/, 
loader: 'babel-loader' 
}, 
{ 


test: /\.(scss|lsass)$/, 
use: ExtractTextPlugin.extract({ 
fallback: 'style-loader', 
use: [ 
{ 
loader: 'css-loader', 
options: { 
url: false, 
minimize: true, 
sourcemap: true 
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} 
}, 


loader: 'sass-loader'， // 打包 Sass/Scss 文 件 
options: { 

sourcemap: true 
¥ 


}) 
}, 


test: /\. (woff2?|eot|ttflotflsvg) (\?.*)2$/， // 打包 字体 文件 
use: "fle-loader' 


}, 


test: 八 . (png1jpe?glgif) (\?.*)2$/， // 打包 图 片 资源 
use: "ur1l-loader?1imit=8192&name=images/ [hash] . [name] . [ext] 
} 
] 
}, 
plugins: [ 
new webpack.HotModuleReplacementPlugin()， // 热 重 载 
new HtmlWebpackPlugin({ 
title: 'Generator', 
filename: './index.html', 
template: 'src/index.html', 
favicon: 'favicon.ico', 
inject: 'body', 
hash: true 


1), 

// 引入 以 作为 其 他 插件 的 依赖 

// new webpack.ProvidePlugin({ 

lI/ $$: "jquery', 

// jQuery: 'jquery' 

A Ws 

new ExtractTextPlugin('style.css') // 将 样式 文件 抽 离 单独 打包 


F 


除 此 之 外 ，Webpack 还 有 许多 配置 项 、loader 和 plugin 可 供 使 用 ， 笔 者 在 此 不 再 
一 一 列举 ， 感 兴趣 的 同学 可 以 去 查阅 官方 文档 进行 学 习 。 
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1. 闭 包 


简单 地 说 ， 闭 包 是 能 够 访问 其 他 函数 内 部 变量 的 函数 。 在 JS 中 访问 一 个 变量 时 ， 解 
释 器 会 先 搜索 当前 函数 作用 域 中 的 变量 ， 如 果 存 在 则 返回 ， 如 果 不 存在 则 继续 搜索 父 级 
作用 域 ( 最 上 层 为 全 局 环境 ) 中 的 变量 ， 直 到 在 整个 作用 域 链 中 都 无 法 找到 变量 时 ， 则 
返回 undefined。 

JS 中 的 闭 包 正 是 依赖 于 这 种 作用 域 链 的 机 制 ， 由 于 只 有 子 函数 作用 域 能 访问 父 作用 
域 中 的 变量 ， 所 以 闭 包 也 像 是 “定义 在 函数 内 部 的 函数 ”。 下 面 来 看 一 个 使 用 JS 闭 包 的 
示例 ， 代 码 如 下 : 


function ShapeFactory (type) { 


Var type = type || 'rect' 
Var counter = 0 
return { 
createshape: function (size, color) { 
counter++ 
console.1og('%s %s %s', type, size || 20, color || 'grey') 


}, 
getCounter: function () { 
return counter 
¥ 
} 
} 


// 圆 形 工厂 

Var circleFactory = ShapeFactory('circle') 
circleFactory.-createShape () 
console.log(circleFactory.getCounter () ) 
circleFactory.createshape (15, 'red') 
console.log(circleFactory.getCounter ()) 

// 矩形 工厂 

Var rectFactory = ShapeFactory () 
rectFactory.createshape () 
console.log(rectFactory.getCounter () ) 


在 这 个 示例 中 存在 两 个 闭 包 ， 函 数 createShape 和 函数 getCounter， 它 们 的 函数 作 
用 域 中 都 含有 对 外 部 变量 的 引用 。 其 中 ， 变 量 type 是 作为 形 参 传 入 ShapeFactory 中 并 
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为 createShape 所 调用 的 ， 而 变量 counter 则 是 在 ShapeFactory 中 声明 后 被 getCounter 
调用 的 。 
可 以 看 到 ， 闭 包 在 这 里 发 挥 了 两 个 作用 。 第 一 ， 在 createShape 中 对 变量 type 的 调 


用 构建 了 一 个 装饰 器 ， 允 许 用 户 把 ShapeFactory 装饰 为 任意 一 个 图 形 工厂 ， 如 示例 
的 circleFactory 和 rectFactory; 第 二 ， 在 ShapeFactory 函数 执行 完成 之 后 ， 由 于 作用 


建 


p 创 


域 中 的 变量 counter 被 getCounter 调用 且 getCounter 作为 函数 返回 体 的 一 部 分 ， 因 此 变量 
counter 没有 被 JS 当 作 垃 圾 回收 掉 ， 在 代码 运行 之 后 , 控制 台 将 打印 如 图 D.1 所 示 的 结果 。 


circle 29 grey 
1 

circle 15 red 
2 

rect 28 grey 
1 


D.1 闭 包 示例 


从 图 D.1 中 ， 我 们 可 以 看 到 counter 是 被 累加 计算 的 。 因 此 ， 在 JS 中 ， 闭 包 也 可 用 
于 模拟 私有 变量 。 


2. 对 象 引 用 


在 介绍 概念 之 前 ， 我 们 先 来 看 两 段 代码 : 


// 示例 一 
var origin = { 
greeting: 'welcome' 
} 
var copy = origin 
origin.farewell = 'byebye' 
console.1log(copy.greeting, copy.farewell) 


示例 二 
Var origin = { 
greeting: 'welcome' 
} 
var copy = origin 
origin = { 
farewell: 'byebye"' 
console.log(copy.greeting, copy.farewell) 
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这 两 段 代码 将 分 别 打 印 出 什么 昵 ? 

示例 一 : 

> welcome byebye 

示例 二 : 

> welcome undefined 

假如 你 都 能 答对 的 话 ， 那 么 可 以 跳 过 这 一 小 节 了 。 

在 JS 中 定义 的 对 象 ， 解 释 器 会 为 其 分 配 一 个 地 址 ， 当 我 们 把 这 个 对 象 赋值 于 其 他 对 
象 时 ， 它 们 会 指向 同一 个 地 址 。 如 在 示例 一 中 ， 笔 者 将 origin 赋值 给 copy 时 ，copy 对 象 
将 引用 origin 对 象 的 地 址 , 因此 当 origin 被 修改 时 , copy 也 将 随 之 发 生变 化 。 而 在 示例 二 中 ， 
笔者 在 复制 origin 之 后 ， 为 origin 分 配 了 一 个 新 的 地 址 ， 此 时 copy 依然 指向 原来 的 地 址 ， 
因此 在 修改 origin 时 ，copy 不 会 发 生变 化 。 

在 项 目 开 发 中 ， 有 时 需要 获取 对 象 的 投影 以 使 在 修改 本 体 和 投影 任意 一 个 时 ， 两 者 
都 会 同步 更 新 ， 这 正 是 对 象 引 用 的 用 武之 地 。 细 心 的 同学 可 能 会 留意 到 ， 在 Vue 的 数据 
与 视图 绑 定 中 ， 这 种 运用 颇 多 。 

不 过 ， 有 时 我 们 只 是 想 复制 对 象 的 值 ， 并 不 想 让 它们 引用 同一 个 地 址 ， 用 专业 的 话 
来 说 就 是 深度 拷贝 对 象 ， 这 时 候 应 该 怎么 做 呢 ? 

办 法 也 很 简单 ， 活 用 一 下 JS 中 的 JSON 对 象 即 可 ， 示 例 代码 如 下 : 

var origin = { 

greeting: 'welcome' 
六 copy = JSON.parse (JSON.stringify (origin)) 


origin.farewell = 'byebye'" 
console.log(copy.greeting, copy.farewell) 
代码 的 运行 结果 如 下 : 


> welcome undefined 


可 以 看 到 ，copy 并 未 随 着 origin 发 生变 化 。 


附录 E 常见 的 ECMAScript 6 语 ; 


ECMAScript 6 也 被 称 为 ES 6， 是 由 国际 标准 化 组 织 ECMA 提出 的 第 六 代 JavaScript 
标准 。 这 一 代 标 准 除了 继承 ES 5 的 规范 之 外 ， 还 丰富 了 许多 特性 。 虽 然 这 些 特 性 并 不 全 
部 能 被 所 有 的 浏览 器 兼容 ， 但 由 于 其 为 开发 和 维护 带 来 的 便利 ， 这 项 标准 依旧 得 以 广泛 
运用 。 

本 文 将 选取 常见 的 几 种 ES 6 语法 进行 讲解 ， 掌 握 这 些 将 让 你 在 ES 6 项 目的 开发 中 
游 所 有余 。 


1. 多 行 字符 串 
在 ES 5 中 ， 处 理 长 字符 串 时 往往 采用 这 样 的 写法 : 


Var content = '<div class="container">' + 
'<div class="header"></div>' + 
'<div class="body"></div>' + 
'<div class="footer"></div>' + 

'</div>"' 


而 ES 6 提供 了 更 好 的 写法 一 一 多 行 字符 串 ， 示 例 代 码 如 下 : 


Var content = ‘<div class="container"> 
<div class="header"></div> 
<div class="body"></div> 
<div class="footer"></div> 

</div>. 


2. 字符 串 模 板 


除了 创建 多 行 字符 串 之 外 ，” 符 号 还 可 以 用 于 创建 字符 串 模板 ， 我 们 可 以 在 字符 串 
模板 中 输出 变量 ， 示 例 代码 如 下 : 


let hello = "hello" 
let helloWworld = `${hello} world. 
console.1log (helloWworld) 


代码 运行 之 后 ， 控 制 台 将 打印 : 


> hello world 
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3. 块 级 作用 域 


在 ES 5 中 ， 我 们 可 以 使 用 var 关键 字 来 声明 函数 作用 域 的 变量 。 但 在 循环 和 判断 语 
旬 中 ，var 关键 字 并 不 生成 作用 域 ， 这 意味 着 在 这 两 者 的 代码 块 中 声明 的 变量 在 代码 块 外 
依然 可 以 访问 到 ， 示 例 代码 如 下 : 


for war 下 = 0 BE< 10 pe {} 
console.1o0g (i) 


代码 运行 之 后 ， 控 制 台 将 打印 : 
》10 


在 ES 6 中 ， 我 们 可 以 使 用 let 关键 字 来 声明 块 级 作用 域 的 变量 ， 示 例 代码 如 下 : 


for (let j] = 0; j < 10; j++) {} 
console.1og(]) 


代码 运行 之 后 ， 控 制 台 将 报错 

》Uncaught ReferenceError: ] is not defined 

除了 1let 之 外 ， 我 们 还 可 以 使 用 const 关键 字 来 声明 块 级 作用 域 的 变量 ， 不 过 使 用 
const 声明 的 变量 的 值 不 可 被 修改 。 


4. 默认 参数 
在 ES 5 中 ， 对 函数 形 参 设置 默认 值 需 要 这 样 写 : 


var CreateShape = function (type, size, color) { 
var type = type || 'circle' 
var size = size || 20 
Var color = color || '#417b9f" 

} 


在 ES 6 中 则 可 以 这 么 写 : 


let createShape = function (type = "circle'， size = 20, color = 
"#417b9f"') {} 


这 样 是 不 是 更 简洁 了 呢 ? 


5. 对 象 字面 量 
使 用 ES 5 语法 来 声明 一 个 引用 外 部 变量 或 者 包含 方法 的 对 象 时 , 我 们 可 能 会 这 么 写 : 
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Var msg = "hel1lo' 
var object = { 
msg: msg, 


logMsg: function () { 
console.1og (this.msg) 
} 
} 


在 ES 6 中 则 简化 了 这 一 写法 ， 当 对 象 引 用 外 部 变量 和 定义 方法 时 ， 可 以 不 再 使 用 键 
值 对 的 形式 ， 示 例 代 码 如 下 : 


let msg = "hello" 
let object = { 
msg, 
logMsg () { 
console.1og (this.msg) 
4 
} 


6. 析 构 赋值 
在 ES 5 中 ， 分 解 一 个 对 象 需要 这 样 写 


var author = { name: 'lonelydawn', email: 'lonelydawn@sina.com' } 
Var name = author.name 
var email = author.email 


ES 6 则 提供 了 更 便捷 的 方式 ， 示 例 代 码 如 下 : 


let author = { name: 'lonelydawn', email: 'lonelydawn@sina.com' } 
let { name, email } = author 
let name: username, email: contact } = author 


除了 对 象 外 ， 我 们 还 可 以 对 更 多 类 型 的 变量 使 用 析 构 语法 ， 代 码 如 下 : 
// 数组 


let counter = [ 3 2 B31 
let one, two, three ] = counter 
let Otour; dvesy Zix = | 8 5 61 


// 字符 串 

let a Bz Ce] Mober 
let £ length: Len } = abc” 
// 数值 和 布尔 值 

let { tostring: sl } = 123 
let tostring: s2 } = true 


这 一 特性 妙用 无 穷 ， 除 了 为 开发 带 来 方便 之 外 ， 还 能 使 代码 看 起 来 十 分 高 大 上 ， 当 
然 也 可 能 使 代码 变 得 异常 难 读 。 
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7. 箭头 函数 


在 ES 6 中 ， 任 何 需 要 匿名 函数 的 地 方 ， 我 们 都 可 以 使 用 箭头 函数 来 蔡 代 。 下 面 是 在 
ES 5 中 几 个 使 用 匿名 函数 的 示例 代码 ; 


// 事件 监听 

document .body.onclick = function () {} 
// 回调 函数 

setTimeout (function () {}, 10) 

// 对 象 方法 


Way eo = 
init: function () {} 


] 
// 变量 声明 


var hub = function () {} 


使 用 箭头 函数 的 写法 如 下 : 
// 事件 监听 


document .body.onclick = () => {} 
// 回调 函数 
setTimeout (() => {}, 10) 
// 对 象 方法 
Var foo = { 
init: () => {} 


} 

// 变量 声明 

var ob = 0) => 
foo.init() 


与 匿名 函数 不 同 的 是 ， 箭 头 函 数 并 不 会 创建 函数 作用 域 ， 箭 头 函数 中 的 this 将 指向 
父 级 函数 作用 域 ， 这 在 使 用 Vue 进行 开发 时 需要 特别 注意 。 


8. 类 和 对 象 


我 们 先 来 看 一 个 示例 ， 代 码 如 下 : 
class People { // 使 用 class 关 键 字 来 定义 类 


constructor (name) { // 构造 器 
this.country = 'China' // 静态 变量 
this.name = name 

} 

getName () { // 方法 getName 
return this.name 

} 
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getCountry () { 
return this.country 
} 
} 
class Author extends People { // 继承 People 类 
constructor (name, email) { 
super (name) ”// 调用 超 类 的 构造 器 
this.email = email 
} 
getEmail () { 
return this.email 
} 
} 
let p = new People('John') // 实例 化 对 象 
console.10g(p.getName ()) // 调用 对 象 的 方法 
console.1og(p.getCountry () ) 
let a = new Author('lonelydawn', 'lonelydawn@sina.com') 
console.1o0g (a.getName () ) 
console.1og(a.getCountry () ) 
console.1log(a.getEmail ()) 


笔者 先 在 示例 中 定义 了 People 类 ， 其 拥有 构造 函数 、country 属性 和 name 属性 、 
getCountry 方法 和 getName 方法 ; 之 后 ， 笔 者 又 定义 了 Author 类 ，Author 继承 于 People， 
笔者 还 为 其 拓展 了 email 属性 和 getEmail 方法 。 

接 下 来 ， 笔 者 声明 了 People 类 的 实例 p 对 象 和 Author 类 的 实例 a 对 象 ， 并 调用 了 实 
例 的 方法 。 代 码 运行 之 后 ， 控 制 台 将 打印 出 ; 


> John 

China 

lonelydawn 

China 
lonelydawn@sina.com 


其 实在 Vue 项 目的 开发 中 ， 类 的 运用 很 少 ， 此 处 稍 作 了 解 即 可 。 


9. 模 块 化 


在 ES 6 之 前 ，JS 的 模块 化 有 两 大 山头 : 一 是 基于 AMD 规范 的 requireJS; 二 是 基于 
CMD 规范 的 seaJS， 两 者 都 是 为 了 弥补 JS 没有 模块 化 机 制 的 缺陷 而 出 现 的 。 

自从 ES 6 诞生 以 来 ，JS 也 终于 有 了 自己 的 模块 化 机 制 。 那 么 在 ES 6 中 ， 模 块 是 如 
何 导入 导出 的 呢 ? 

ES 6 提供 了 export 和 import 一 对 关键 字 进 行 模块 导入 和 导出 ， 示 例 代码 如 下 : 
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greetings.]s 
// 导出 常量 


export const author = "John' 

// 导出 函数 

export function sayHello (name) { 
return “Hello ${name}` // 字符 串 模 板 


} 

// 导出 引用 内 部 函数 的 函数 

export function sayHelloByAuthor (name) { 
return ‘“${author}: ${sayHello (name)}. 

} 


main.js 

// 析 构 引入 

import { author, sayHello, sayHelloByAuthor } from '../assets/data' 
// 整体 引入 


import * as greetings from '../assets/data' 


笔者 在 本 书 的 实战 项 目 中 大 量 使 用 这 两 个 关键 字 ， 同 学 们 可 以 查看 项 目 源码 进行 
学 习 。 


10. Promise 函 数 


关于 Promise 函数 的 教程 有 很 多 ， 笔 者 不 打算 重 弹 前 人 的 老 调 ， 这 里 只 讲述 两 个 点 ， 
一 是 为 什么 要 用 ， 二 是 如 何 使 用 。 

假如 现在 有 两 个 后 台 请 求 , B 请 求 需要 根据 A 请 求 获取 的 数据 来 发 送 请 求 。 举 个 例子 ， 
在 一 个 新 闻 App 的 首 屏 加 载 过 程 中 ， 前 端 程序 员 需 要 先 发 送 A 请 求 获取 如 娱乐 、 军 事 、 
体育 等 分 类 列表 ， 之 后 将 列表 中 的 第 一 项 作为 请 求 参数 向 后 台 发 送 B 请 求 ， 以 获取 该 分 
类 下 的 新 闻 列 表 。 乍 一 听 ， 我 们 似乎 应 该 这 样 写 ; 


Var categories = [] 

var news = [] 

// A 请 求 

ajazx.get ({ // 假设 ajax 为 异步 请 求 控件 
methods: ' GET' 
url: '/categories' 

}) .then(res => { 
categories = res.data 

}) 

// Bi 请求 

ajax.get ({ 
methods: "GET'"， 
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url: '/news', 

query: { category: categories[0] } 
}) .then (res => { 

news = res.data 
}) 


但 由 于 AJAX 请 求 是 异步 执行 的 , 代码 排列 的 先后 顺序 并 不 能 决定 请 求 的 完成 顺序 ， 
因此 B 请 求 有 可 能 失败 。 如 果 不 使 用 Promise 的 话 ， 笔 者 会 这 么 写 : 


var categories = [] 
Var news = [] 
var canGo = false // 信号 量 
ajax.get({ 
methods: "GET' 
url: '/categories' 
}) .then(res => { 
categories = res.data 
canGo = true // 标识 A 请 求 完 成 
}) 
let timer = setInterval(function () { // 循环 检测 
if (canGo) { // 当 A 请 求 完 成 后 ,执行 B 请 求 
ajax.get ({ 
methods: 'GET', 
url: '/news', 
query: { category: categories[0] } 
}) .then(res => { 
news = res.data 
}) 
clearInterval (timer) // 清除 定时 器 
} 
}, 10) 


这 里 使 用 定时 器 对 A 请 求 的 执行 状态 进行 循环 检测 ， 当 判定 A 请 求 完 成 后 ， 信 号 量 
canGo 的 值 将 被 设 为 tue， 此 时 B 请 求 方 可 执行 。 看 上 去 ， 这 种 写法 确实 解决 了 问题 ， 
但 却 占用 了 较 多 的 浏览 器 资源 。 我 们 来 换 一 种 写法 ， 使 用 异步 嵌 套 循环 ， 代 码 如 下 : 


var categories = [] 

var news = [] 

ajax.get ({ 
methods: ‘'GET', 
url: '/categories' 

}) .then (res => { 
categories res.data 
ajax.get ({ 

methods: 'GET', 
url: '/news', 
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query: { category: categories[0] } 
}) .then (res => { 
news = res.data 
}) 
} 


这 种 写法 也 可 以 解决 问题 ， 但 当 请 求 增多 ， 菊 套 层次 越 来 越 深 时 ， 代 码 将 会 显得 十 
分 腾 肿 ， 难 以 阅读 和 维护 。 下 面 ， 我 们 来 看 一 下 使 用 Promise 函数 的 写法 ， 代 码 如 下 : 


var categories = [] 
Var news = [] 
new Promise (function (resolve，reject) { // 匿名 函数 接收 回调 函数 resolve 
和 reject 
ajax.get ({ 
methods: '‘'GET', 
url: '/categories' 
}) .then (res => { 
categories = res.data 
人 // 当 请 求 成 功 时 ， 执 行 resolve 回 调 
}) .catch (error => 


reject (error) // (请求 失败 时 ， 执行 reject 回 调 


}) 
}) .then (data => { // resolve 函 数 
ajax.get ({ 
methods: "GET' 
url: '/news', 
query: { category: data } 
}) .then (res => { 
news = res.data 


I 

}) .catch (error => { // reject 函 数 
console.1log (error) 

}) 


在 异步 处 理 成 功 和 失败 时 ，Promise 均 会 为 开发 者 提供 相应 的 回调 函数 以 编写 业务 妇 
辑 ， 这 是 一 种 解决 异步 撕 套 的 成 熟 机 制 。 此 外 ， 它 以 环 环 相 扣 的 链 式 结构 避免 了 腑 肿 的 
代码 堆积 ， 项 目 因此 看 上 去 更 加 优雅 。 

除了 上 述 内 容 之 外 ，ES 6 还 有 许多 强大 的 特性 可 供 使 用 ， 这 里 笔者 不 再 多 说 ， 感 兴 
趣 的 同学 可 以 翻阅 官方 文档 进行 学 习 。 


